Character Sheet Development/Dark Mode
From Roll20 Wiki
Page Updated: 2022-03-11 |
This is related to Editing(coding) Character Sheets, which require Pro info to be able to use.Main Page: Building Character Sheets |
This article is a stub. |
Main Page: Building Character Sheets
Character Sheet Development
Getting Started
- Using Custom Sheets
- Building Sheets
(Main Page) - Glossary
- Code Restrictions
- Best Practice
- Common Mistakes
- Tutorials
- Examples, Templates
- Pattern Libraries
- HTML & storing data
- CSS & Styling
- Sheet Layout
- Images Use
- Fonts & Icons
- Dark Mode
- Mobile
General
- Updates & Changelog
- Known Bugs
- Character Sheet Enhancement(CSE)
- Custom Roll Parsing
- Legacy Sheet(LCS)
- Beacon SDK
Reference
- Buttons
- Repeating Sections
- Sheetworkers
- Roll Templates
- sheet.json
- Translation
- Auto-Calc
- Advanced
- All SheetDev Pages
Tools & Tips
Other
- See Dark Mode for Character Sheets (on Dev Server) Feb 2022
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
- Pathfinder Community Dark Mode implemented
- Aborea
- Ironsworn - Starforged
- D&D 5E by Roll20Character Sheethave 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