Difference between revisions of "Character Sheet Development/Dark Mode"
From Roll20 Wiki
Andreas J. (Talk | contribs) m (Roll Template) |
m (→Darkmode support) |
||
Line 76: | Line 76: | ||
* {{5E}} have implemented dark mode, but there is no public sourcecode for it. | * {{5E}} have implemented dark mode, but there is no public sourcecode for it. | ||
* [https://github.com/Roll20/roll20-character-sheets/pull/10308 Harnmaster3] Styling changes to make dark theme of sheet align better with roll20 dark mode. Update by sheet author: Now merged the previous light and dark themes with VTT dark mode. Turning on VTT dark mode switches the sheet into dark mode too. I took the liberty of moving my sheet up to the full support section. | * [https://github.com/Roll20/roll20-character-sheets/pull/10308 Harnmaster3] Styling changes to make dark theme of sheet align better with roll20 dark mode. Update by sheet author: Now merged the previous light and dark themes with VTT dark mode. Turning on VTT dark mode switches the sheet into dark mode too. I took the liberty of moving my sheet up to the full support section. | ||
+ | * [https://github.com/Roll20/roll20-character-sheets/tree/master/PokemonTabletopAdventures_v3 Pokémon Tabletop Adventures 3] by TheAdamTalbot and mrianmerry | ||
===Patch only=== | ===Patch only=== |
Revision as of 13:26, 31 August 2022
Page Updated: 2022-08-31 |
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)
- (upcoming) 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.
Roll Template
Main Page: BCS/Roll Templates
Including .sheet-rolltemplate-darkmode
at the start of your selector will target roll templates only when dark mode is enabled.
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
- Palladium Rifts by Grinning Gecko
- D&D 5E by Roll20Character Sheethave implemented dark mode, but there is no public sourcecode for it.
- Harnmaster3 Styling changes to make dark theme of sheet align better with roll20 dark mode. Update by sheet author: Now merged the previous light and dark themes with VTT dark mode. Turning on VTT dark mode switches the sheet into dark mode too. I took the liberty of moving my sheet up to the full support section.
- Pokémon Tabletop Adventures 3 by TheAdamTalbot and mrianmerry
Patch only
Sheets that made minor patches to keep the sheet readable in dark mode, without adding a dark mode.
- Kult 3rd edition sheet & rolltemplate patch
- HeroQuest Glorantha
- Twilight 2000
- The Dee Sanction