Home
Games
Marketplace
Compendium Character Vault Roll20 for iPad and Android
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
(Created page with "<noinclude>{{revdate}}{{BCS}}{{stub}} {{main|Building Character Sheets}} How to implement Dark Mode in character sheets.{{NavSheetDoc}}</noinclude> * See [https://app.roll...")
 
(→‎Sheet Examples: Add SCSS example to support dark mode.)
 
(18 intermediate revisions by 7 users not shown)
Line 4: Line 4:
 
* See [https://app.roll20.net/forum/post/10686505/dark-mode-for-character-sheets Dark Mode for Character Sheets] (on Dev Server) Feb 2022
 
* See [https://app.roll20.net/forum/post/10686505/dark-mode-for-character-sheets Dark Mode for Character Sheets] (on Dev Server) Feb 2022
  
−
'''Theme Switch'''
+
=Features=
 +
* Roll Templates have some issues in dark mode - ''(Feb 2022)''
  
−
When a user switches to dark mode, the virtual tabletop adds the specific CSS class {{code|.sheet-darkmode}} to the {{code|<body>}} element. When flipping the switch back to light, that class is removed.
+
==Theme Switch==
  
 +
When a user switches to [[Dark Mode]], the virtual tabletop adds the specific CSS class {{code|.sheet-darkmode}} to the {{code|<body>}} element. When flipping the switch back to light, that class is removed.
  
−
'''Theme Change'''
+
==Theme Change==
  
 
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}}
  
−
'''Notes'''
+
Including {{c|.sheet-rolltemplate-darkmode}} at the start of your selector will target roll templates only when dark mode is enabled.
−
* Roll Templates have some issues in dark mode - ''(Feb 2022)''
+
 
 +
=Updating Existing Sheet=
 +
 
 +
'''Patching unsupported sheet'''<br>
 +
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:
 +
<pre data-language="css">.charsheet{
 +
background-color:white;
 +
color:black;
 +
}</pre>
 +
A [[Legacy Sheet]] will not support dark mode and must be updated to [[CSE]] before this will work.
 +
 
 +
'''Adding darkmode support'''<br>
 +
This is what the [https://github.com/Roll20/roll20-character-sheets/pull/10254 Aborea] sheet added to the CSS, to add dark mode:
 +
<pre data-language="css">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
 +
}</pre>
 +
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 {{c|background-color}} and other things.
 +
 
 +
'''Overriding Dark Mode in Roll Templates'''<br>
 +
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:
 +
<pre data-language="css">
 +
<rolltemplate class="sheet-rolltemplate-template">
 +
  <div class="template-wrapper">
 +
    <!-- Template content here -->
 +
  </div>
 +
</rolltemplate>
 +
 
 +
.sheet-rolltemplate-template .sheet-template-wrapper .inlinerollresult{
 +
  /*Your styling here*/
 +
}
 +
</pre>
 +
 
 +
==Sheet Examples==
 +
* https://github.com/Roll20/roll20-character-sheets/pulls?q=is%3Apr+sort%3Aupdated-desc+dark+mode
 +
 
 +
===Darkmode support===
 +
Sheets that updated to support the new dark mode
 +
* [https://github.com/Roll20/roll20-character-sheets/pull/10259 Pathfinder Community] Dark Mode implemented
 +
* [https://github.com/Roll20/roll20-character-sheets/pull/10254 Aborea]
 +
* [https://github.com/Roll20/roll20-character-sheets/pull/10297 Ironsworn - Starforged]
 +
* [https://github.com/Roll20/roll20-character-sheets/tree/master/Palladium%20Rifts%20by%20Grinning%20Gecko Palladium Rifts by Grinning Gecko]
 +
* {{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/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===
 +
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/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/10261 Twilight 2000]
 +
* [https://github.com/Roll20/roll20-character-sheets/pull/10252 The Dee Sanction]
  
 +
=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://portal.productboard.com/roll20/1-roll20-portal/c/153-dark-color-scheme-while-in-a-game
 +
* https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
 
<noinclude>
 
<noinclude>
 
[[Category:Dark Mode]]
 
[[Category:Dark Mode]]
 
[[Category:Character Sheet Creation]]‎</noinclude>
 
[[Category:Character Sheet Creation]]‎</noinclude>

Latest revision as of 03:01, 18 February 2024

Wiki-Logo 75x49.png
Page Updated:
  2024-02-18
Octicons-terminal.png
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. You can help the Roll20 Community Wiki by expanding it.


Main Page: Building Character Sheets

How to implement Dark Mode in character sheets.

Character Sheet Development
Getting Started

General

Reference

Tools & Tips

Git/GitHub Githublogo.png

Other

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

[edit] Darkmode support

Sheets that updated to support the new dark mode

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

[edit] Related links

Retrieved from "https://wiki.roll20.net/index.php?title=Character_Sheet_Development/Dark_Mode&oldid=33702"