Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

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

From Roll20 Wiki

Jump to: navigation, search
m (Updating Existing Sheet)
m
Line 71: Line 71:
 
===Patch only===
 
===Patch only===
 
Sheets that made minor patches to keep the sheet readable in dark mode, without adding a dark mode.
 
Sheets that made minor patches to keep the sheet readable in dark mode, without adding a dark mode.
* [https://github.com/Roll20/roll20-character-sheets/pull/10247 Harnmaster3] Styling changes to make dark theme of sheet align better with roll20 dark mode.
+
* [https://github.com/Roll20/roll20-character-sheets/pull/10247 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).
 
* [https://github.com/Roll20/roll20-character-sheets/pull/10250 Kult 3rd edition] sheet & rolltemplate patch
 
* [https://github.com/Roll20/roll20-character-sheets/pull/10250 Kult 3rd edition] sheet & rolltemplate patch
 
* [https://github.com/Roll20/roll20-character-sheets/pull/10260 HeroQuest Glorantha]
 
* [https://github.com/Roll20/roll20-character-sheets/pull/10260 HeroQuest Glorantha]

Revision as of 19:46, 10 March 2022


Main Page: Building Character Sheets

How to implement Dark Mode in character sheets.

Contents

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

Darkmode support

Sheets that updated to support the new dark mode

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

Related links