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

Character Sheet Development/Dark Mode

From Roll20 Wiki

Revision as of 17:55, 8 March 2022 by Vince (Talk | contribs)

Jump to: navigation, search


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 Darkmode 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.

Related links