Difference between revisions of "Character Sheet Development/Dark Mode"
From Roll20 Wiki
Olaf van Tol (Talk | contribs) (→Darkmode support) |
Andreas J. (Talk | contribs) m (→Sheet Examples: link example) |
||
(6 intermediate revisions by 4 users not shown) | |||
Line 14: | Line 14: | ||
By adding color choices to the end of your sheets your sheet’s CSS, wrapped in a {{code|<nowiki>body.sheet-darkmode { }</nowiki>}} users will see the change when they flip the switch. | By adding color choices to the end of your sheets your sheet’s CSS, wrapped in a {{code|<nowiki>body.sheet-darkmode { }</nowiki>}} users will see the change when they flip the switch. | ||
+ | |||
+ | ==Roll Template== | ||
+ | {{main|BCS/Roll Templates}} | ||
+ | |||
+ | Including {{c|.sheet-rolltemplate-darkmode}} at the start of your selector will target roll templates only when dark mode is enabled. | ||
=Updating Existing Sheet= | =Updating Existing Sheet= | ||
Line 23: | Line 28: | ||
color:black; | color:black; | ||
}</pre> | }</pre> | ||
+ | A [[Legacy Sheet]] will not support dark mode and must be updated to [[CSE]] before this will work. | ||
'''Adding darkmode support'''<br> | '''Adding darkmode support'''<br> | ||
Line 62: | Line 68: | ||
==Sheet Examples== | ==Sheet Examples== | ||
* https://github.com/Roll20/roll20-character-sheets/pulls?q=is%3Apr+sort%3Aupdated-desc+dark+mode | * https://github.com/Roll20/roll20-character-sheets/pulls?q=is%3Apr+sort%3Aupdated-desc+dark+mode | ||
− | + | * {{fpl|11974307 Changing dice roll background with Jakob's Better Default Rolltemplate}} | |
===Darkmode support=== | ===Darkmode support=== | ||
Sheets that updated to support the new dark mode | Sheets that updated to support the new dark mode | ||
Line 71: | Line 77: | ||
* {{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 | ||
+ | * [https://github.com/Roll20/roll20-character-sheets/tree/master/Star%20Wars%20Saga%20Edition Star Wars Saga Edition] | ||
+ | |||
+ | ===Easy darkmode support using SCSS=== | ||
+ | Darkmode can be added fairly easily using this guide: | ||
+ | https://berbaquero.com/posts/2023/03/sass-dark-mode/ | ||
+ | |||
+ | Example: | ||
+ | |||
+ | @mixin theme-mode { | ||
+ | body.sheet-darkmode & { | ||
+ | @content; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .your-selector { | ||
+ | color: #bbb; | ||
+ | @include theme-mode { | ||
+ | color: #666; | ||
+ | } | ||
+ | } | ||
===Patch only=== | ===Patch only=== | ||
Line 80: | Line 107: | ||
=Related links= | =Related links= | ||
+ | * https://app.roll20.net/forum/post/10753577/dark-mode-detectable-by-sheets | ||
* [https://app.roll20.net/forum/post/10728562/dark-mode-vtt-bug-thread Dark Mode VTT Bug Thread] | * [https://app.roll20.net/forum/post/10728562/dark-mode-vtt-bug-thread Dark Mode VTT Bug Thread] | ||
* https://portal.productboard.com/roll20/1-roll20-portal/c/153-dark-color-scheme-while-in-a-game | * https://portal.productboard.com/roll20/1-roll20-portal/c/153-dark-color-scheme-while-in-a-game |
Latest revision as of 11:55, 16 July 2024
Page Updated: 2024-07-16 |
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 |
[edit] Features
- Roll Templates have some issues in dark mode - (Feb 2022)
[edit] 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.
[edit] 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.
[edit] 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.
[edit] 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; }
A Legacy Sheet will not support dark mode and must be updated to CSE before this will work.
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*/ }
[edit] Sheet Examples
- https://github.com/Roll20/roll20-character-sheets/pulls?q=is%3Apr+sort%3Aupdated-desc+dark+mode
- Changing dice roll background with Jakob's Better Default Rolltemplate(Forum)
[edit] 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
- Star Wars Saga Edition
[edit] Easy darkmode support using SCSS
Darkmode can be added fairly easily using this guide: https://berbaquero.com/posts/2023/03/sass-dark-mode/
Example:
@mixin theme-mode { body.sheet-darkmode & { @content; } } .your-selector { color: #bbb; @include theme-mode { color: #666; } }
[edit] 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