Revision as of 20:23, 4 March 2022

Main Page: Building Character Sheets

How to implement Dark Mode in character sheets.

Character Sheet Development
Getting Started

General

Reference

Tools & Tips

Git/GitHub

Other

See Dark Mode for Character Sheets (on Dev Server) Feb 2022

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.

Sheet Examples

Darkmode support

Sheets that updated to support the new dark mode

Aborea
D&D 5E by Roll20
^{^Character}_{_Sheet}
have 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.
Kult 3rd edition sheet & rolltemplate patch
HeroQuest Glorantha
Twilight 2000
Pathfinder Community
The Dee Sanction

@@ 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
-'''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.
+=Updating Existing Sheet=
-'''Notes'''
+'''Patching unsupported sheet'''<br>
-* Roll Templates have some issues in dark mode - ''(Feb 2022)''
+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>
+'''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.
+==Sheet Examples==
+===Darkmode support===
+Sheets that updated to support the new dark mode
+* [https://github.com/Roll20/roll20-character-sheets/pull/10254 Aborea]
+* {{5E}} have 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.
+* [https://github.com/Roll20/roll20-character-sheets/pull/10247 Harnmaster3] Styling changes to make dark theme of sheet align better with roll20 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/10259 Pathfinder Community]
+* [https://github.com/Roll20/roll20-character-sheets/pull/10252 The Dee Sanction]
+=Related links=
+* [https://app.roll20.net/forum/post/10728562/dark-mode-vtt-bug-thread Dark Mode VTT Bug Thread]
 <noinclude>
 [[Category:Dark Mode]]
 [[Category:Character Sheet Creation]]‎</noinclude>

Roll20 Wiki

Navigation

Personal tools

Toolbox

Difference between revisions of "Character Sheet Development/Dark Mode"

From Roll20 Wiki