Revision as of 20:29, 13 March 2022

Main Page: Building Character Sheets

How to implement Dark Mode in character sheets.

Character Sheet Development
Getting Started

General

Reference

Tools & Tips

Git/GitHub

Other

See Dark Mode for Character Sheets (on Dev Server) Feb 2022

Features

Roll Templates have some issues in dark mode - (Feb 2022)

Theme Switch

When a user switches to Dark Mode, the virtual tabletop adds the specific CSS class .sheet-darkmode to the <body> element. When flipping the switch back to light, that class is removed.

Theme Change

By adding color choices to the end of your sheets your sheet’s CSS, wrapped in a body.sheet-darkmode { } users will see the change when they flip the switch.

Updating Existing Sheet

Patching unsupported sheet
If you have a older sheet that's black & white and turn on dark mode, the background might turn dark and make some text unreadable. Adding the following to the sheet should fix it, in most cases:

.charsheet{
	background-color:white;
	color:black;
}

Adding darkmode support
This is what the Aborea sheet added to the CSS, to add dark mode:

body.sheet-darkmode button,
body.sheet-darkmode input,
body.sheet-darkmode optgroup,
body.sheet-darkmode select,
body.sheet-darkmode textarea,
body.sheet-darkmode .charsheet {
	color: #eee
}
body.sheet-darkmode .btn,
body.sheet-darkmode .btn.btn-default {
	color: #c8c3bc;
	text-shadow: rgba(24,26,27,.75) 0px 1px 1px;
	background-color: #1e2021;
	background-image: linear-gradient(#181a1b, #26292b);
	border-color: #3e4446 #3e4446 #43494c;
	box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px
}

It essentially only changed the default dark text color to a light color, and let the dark mode's default (dark) background make the sheet dark, while on the roll template it specified background-color and other things.

Overriding Dark Mode in Roll Templates
With how it's currently setup (3/8/2022), you should just need 3 classes (or equivalent) to override the dark mode styling. e.g. this:

<rolltemplate class="sheet-rolltemplate-template">
  <div class="template-wrapper">
    <!-- Template content here -->
  </div>
</rolltemplate>

.sheet-rolltemplate-template .sheet-template-wrapper .inlinerollresult{
  /*Your styling here*/
}

Sheet Examples

https://github.com/Roll20/roll20-character-sheets/pulls?q=is%3Apr+sort%3Aupdated-desc+dark+mode

Darkmode support

Sheets that updated to support the new dark mode

Pathfinder Community Dark Mode implemented
Aborea
Ironsworn - Starforged
Palladium Rifts by Grinning Gecko
D&D 5E by Roll20
^{^Character}_{_Sheet}
have implemented dark mode, but there is no public sourcecode for it.

Patch only

Sheets that made minor patches to keep the sheet readable in dark mode, without adding a dark mode.

Harnmaster3 Styling changes to make dark theme of sheet align better with roll20 dark mode. Edit by sheet author: The sheet does already offer it's own light theme and dark theme on the settings page. I have to figure out the best way to merge VTT dark mode with these themes (and if merging/linking them is even desired).
Kult 3rd edition sheet & rolltemplate patch
HeroQuest Glorantha
Twilight 2000
The Dee Sanction

@@ Line 68: / Line 68: @@
 * [https://github.com/Roll20/roll20-character-sheets/pull/10254 Aborea]
 * [https://github.com/Roll20/roll20-character-sheets/pull/10297 Ironsworn - Starforged]
+* [https://github.com/Roll20/roll20-character-sheets/tree/master/Palladium%20Rifts%20by%20Grinning%20Gecko Palladium Rifts by Grinning Gecko]
 * {{5E}} have implemented dark mode, but there is no public sourcecode for it.

Roll20 Wiki

Navigation

Personal tools

Toolbox

Difference between revisions of "Character Sheet Development/Dark Mode"

From Roll20 Wiki