Dark Mode for Character Sheets

1644622132

Edited 1644625715

Forum Champion

Translator

Permalink Quote

Hello Sheet Authors! As you might have heard , we’re preparing to roll out color theme options for the Virtual Tabletop including a dark mode . Sheets Authors who wish to support theme options in their sheets can develop and test with the Custom Sheet Sandbox on the Dev Server. 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. Play in the Sandbox This has been released to the Dev Server, and is available to test with your sheets in the Custom Sheet Sandbox.

1644622476

Forum Champion

Sheet Author

API Scripter

Compendium Curator

Permalink Quote

Kenton, Can you give a little more details on when the .sheet-darkmode gets applied? Does it happen only if the user has specifically toggled dark mode on? or does it also happen if their browser is set to dark mode?

1644624143

Pro

Sheet Author

Permalink Quote

It looks like there are still issues with roll templates, though that is probably a work in progress. It looks like the title of roll templates is fine if it is white in a dark background.  However, if you use black text in a lighter background, it turns the text gray just like it does in the body of the template.  This is especially good if you have a gray header background... Since this is affecting the text of the default roll template, I am assuming there will be more changes to come, but it would be nice to know what changes will need to be made to roll templates before this goes live.

1644624495

Edited 1644624954

Pro

Sheet Author

Permalink Quote

@Scott Seems to only toggle sheet-darkmode when you flip the switch in the vtt.  I keep my os and browsers in darkmode by default and it only happens on the sheet if I toggle in-game. Agree with Krynic on roll templates (out-of-the-box): Is this the best place to report issues and make suggestions Kenton? Thanks

1644630120

Pro

Sheet Author

Permalink Quote

Suppose I'll have to play with it, but thoughts on how this will affect custom sheets that already have color themes baked in?

1644640762

Pro

Sheet Author

Permalink Quote

John D. said: Suppose I'll have to play with it, but thoughts on how this will affect custom sheets that already have color themes baked in? So far, it doesn't affect them at all.  I have background colors set for the main sheet, inputs, and readonly fields.  None of that is affected so far.  As long as it doesn't wash out black text like it is doing in the roll template, should be good.

1644641697

Pro

Sheet Author

Permalink Quote

I'm thinking sheets with multiple themes already may need to create a new dark option or add new versions of the existing themes (triggered by sheet-darkmode) that are dark mode friendly.  I will probably do both for the PF Community sheet.  Maybe just an additional dark theme that works with the sheet's default colors and then as I have time(a scarce commodity), add dark versions of the other options.

1644685209

Forum Champion

Translator

Permalink Quote

Can you give a little more details on when the .sheet-darkmode gets applied? Color theme is set based on browser/OS setting, and user interaction with the switch. We store the user preference for color theme in browser's local storage. The preference is set based on browser color preference or OS color preference when loading the VTT. We update the local storage setting when the switch is flipped. This class is appended to the body tag when local storage is updated. On the topic of roll templates , we are still working on the full release. There are areas where colors need to be adjusted. With this most recent release, we've gotten the icons and character sheet communication set. How will this affect custom sheets that already have color themes? This will not change anything about colors of existing custom sheets. Nothing is required if you don't wish to have a dark theme in your custom sheet. If you want to make a dark theme for your sheet, we're providing the technical details before public launch. Comments and issues are welcome here in the Portal Start here by letting answering "How important is this to you?" and then add any additional details you'd like to share.

1645227852

Edited 1645229102

Pro

Sheet Author

Permalink Quote

It looks like I will need to do something about the roll templates, since it is still destroying readability for ones that don't have any sort of dark mode.  I notice that the roll templates that specify white text are now using clear white text again, so they are ok, but any that use black text (not used by the default template) still get changed to gray.  Since the roll itself isn't showing up well in the default template, I am assuming there are more changes to come. It looks like I may just need to move away from any straight white or black text so that things will still display in a way that is usable whether darkmode is on or off. Without darkmode: Edit:  It also isn't too friendly to the current setup for some api output to chat.

1646814486

Forum Champion

Sheet Author

Translator

Permalink Quote

btw we're collecting the community wisdom on this here: <a href="https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode</a>

1647030767

Pro

Sheet Author

Permalink Quote

Thanks Andreas, that was helpful. Not seeing a way to style rolltemplates to be responsive to darkmode toggling yet — those render outside of the character sheet body container that has .sheet-darkmode showing up on it — but hope someone figures that out. :)     

1647035386

Forum Champion

Sheet Author

Translator

Permalink Quote

Fred H. said: Not seeing a way to style rolltemplates to be responsive to darkmode toggling yet Yeah that's a current issue, somewhat mitigated if you increase specificity of your stuff. We'll see how things develop.

1647198540

Sheet Author

Permalink Quote

@Kenton would it be easy/doable to add a class like " .sheet-darkmode" to the class .sheet-roll-template-custom ? That seems like a fairly straightforward  solution to allow sheet authors to also do dark mode styling for their roll templates.

1647207547

Edited 1647207797

Pro

Sheet Author

Permalink Quote

I noticed this rule being applied if the roll template has a specific name: Output looks like this (first template is not named sheet-rolltemplate-skill but the second one is): EDIT : Looks like this might change, as it's under the following comment in the editorDarkMode.css : /* || D&D ROLL-TEMPLATES --- probably shouldn't be here */

1647219755

Edited 1647219888

Permalink Quote

This isn't directly related to sheets but I don't know where else to put it. This orange-brown emote text is WAY too dark. It really, really needs to be lightened up.

1647222027

Forum Champion

Marketplace Creator

API Scripter

Permalink Quote

Hi Rachel! Best place to report that would be the Dark Mode VTT Bug Thread . It's a style created by the VTT and not any specific character sheet. I know that matter has been reported at least once.

1647301716

Permalink Quote

keithcurtis said: Hi Rachel! Best place to report that would be the Dark Mode VTT Bug Thread . It's a style created by the VTT and not any specific character sheet. I know that matter has been reported at least once. Thank you.

1649092338

Permalink Quote

Could you move the dark mode button please it covers the bar on the left and makes it hard to navigate and I will never use it.

1649092864

Pro

Sheet Author

Permalink Quote

Vampiregoat69 said: Could you move the dark mode button please it covers the bar on the left and makes it hard to navigate and I will never use it. You might want to check your extensions, because the switch is below the bar on the left in both Firefox and Chrome for me.

1649098678

Forum Champion

Marketplace Creator

API Scripter

Permalink Quote

Vampiregoat69 said: Could you move the dark mode button please it covers the bar on the left and makes it hard to navigate and I will never use it. Also, if you do find it is not due to an extension, the place to report this would be the  Dark Mode VTT Bug Thread . This thread is concerned with Dark Mode as it applies to character sheet creation. The placement of the button is handled by the VTT team, although the thread I linked does also monitor issues on the D&D 5th Edition by Roll20 Sheet.

1652856433

Permalink Quote

Dark mode for all of the site please. It burns!

1

You must Login to your Roll20 Account to post a reply.