[HarnMaster3] Request for user feedback - merge sheet themes with new dark mode?

For people using the Harnmaster3 sheet: I had already made two themes (light and dark) for the sheet, which is available via the settings. I can now keep this theme selection seperate, to toggle independently from the VTT dark mode or I can merge it, so the sheet always flips to dark theme when VTT dark mode is toggled. What would you prefer?

I've gone ahead and merged dark theme styling into dark mode CSS that automatically toggles when dark mode VTT is enabled. A pull request is submitted, change will roll out next week. 

This may be an obvious question, but how do you detect when dark mode is engaged?

Olaf said: For people using the Harnmaster3 sheet: I had already made two themes (light and dark) for the sheet, which is available via the settings. I can now keep this theme selection seperate, to toggle independently from the VTT dark mode or I can merge it, so the sheet always flips to dark theme when VTT dark mode is toggled. What would you prefer? I don't have a preference, as long as you can still manually choose which one you want to use. The problem I have with the current Dark Mode, is that most roll templates which are not straight black and white, do not work well with dark theme as it is now. Often there's either a terrible clash of colors or big loss of contrast, or both, making the Dark Mode unusuitable for me. I hate to not see the roll result at a glance and this loss of contrast etc. does just that. I LOVE the idea of a Dark Mode and would really like to use it (my old eyes would be thankful), but not at the cost of legibility. I tested the Dark Mode and theme for the HM3 sheet just now and to me both the roll templates and the armor profile sections appear washed out, suffering from loss of contrast as if the Dark Mode had applied a light grey semi-transparent overlay on top of them. Other sections appeared all right in Dark Mode. However, I will not be using this Dark Mode until Roll20 fixes the code that's doing the color-changing and whatnot to a smarter one (I'm not a programmer, I don't know how it is done).

GiGs said: This may be an obvious question, but how do you detect when dark mode is engaged? With the release of VTT dark mode, roll20 provides an extra css class to target in the character sheet: body.sheet-darkmode . With this you can include  styling that is specific for the sheet if the VTT is in dark mode. What I did is built on my setup for having themes in the sheet: in the root i've defined two color sets, a dark mode and a light mode, with variables. Then in either body or body.sheet-darkmode I set variables to connect to the color scheme variables as applicable. In the rest of the css I use the variables to define colors instead of hard-coding colors. This made it quite easy to support dark mode. It grew organically and I'm no color expert, so others will probably be able to improve on this, but in case it helps here is the gist of it. You can find the full code at  roll20-character-sheets/HarnMaster3 at master · Roll20/roll20-character-sheets (github.com) Variables for color themes and subsequent connection to light and dark mode : :root { /* light theme */   --bgs-light: #f7f7f7f1;    --bgd-light: #a27800;    --bgi-light: #ffffff99;   --bgir-light: #ffffff00;   --bgg-light: #ffffd7;   --tcd-light: #262626;   --tcl-light: #ffffd7;   --tch-light: #0087ff;   --hlr-light: #ffea81b3;   --bbg-light: #fff5aa;  /* dark theme */   --bgs-dark: #1c1c1cf1;   --bgd-dark: #af8700; /* always keep section titles the same background */   --bgi-dark: #ffffff21;   --bgir-dark: #00000000;     --bgg-dark: #262626c2;   --tcd-dark: #e4e4e4;   --tcl-dark: #e4e4e4;   --tch-dark: #0087ff;   --hlr-dark: #484845b3;   --bbg-dark: #e4e4e4; } body {   --background-sheet: var(--bgs-light);   --background-dark: var(--bgd-light); /* TODO rename variable, unclear now */   --background-input: var(--bgi-light);   --background-inputro: var(--bgir-light);   --background-grid: var(--bgg-light);   --textcolor-dark: var(--tcd-light);   --textcolor-light: var(--tcl-light);   --textcolor-highlight: var(--tch-light);   --highlight-row: var(--hlr-light);   --button-background: var(--bbg-light); } /* VTT dark mode styling (from previous dark theme) */ body.sheet-darkmode  {   --background-sheet: var(--bgs-dark);   --background-dark: var(--bgd-dark); /* TODO rename variable, unclear now */   --background-input: var(--bgi-dark);   --background-inputro: var(--bgir-dark);   --background-grid: var(--bgg-dark);   --textcolor-dark: var(--tcd-dark);   --textcolor-light: var(--tcl-dark);   --textcolor-highlight: var(--tch-dark);   --highlight-row: var(--hlr-dark);   --button-background: var(--bbg-dark); } Element styled refering back to the color variables: .characterviewer .nav-tabs>li.active>a { background-color: var(--bgs-light); }

@Tommi thank you for the feedback. I will see this week if I can play around with the armour section, I see what you mean about the reduced contrast. I'll update here when I've worked on the sheet. The whole dark mode (and thus the color scheme of the sheet)  can be manually toggled with the icon on the left hand side of the  VTT.  The roll templates will be a bit harder unfortunately, sheet authors have less control over that. Unfortunately roll20 doesn't (yet) allow us to easily target dark  mode spefically there. See also  Community Forums: Dark Mode for Character Sheets | Roll20: Online virtual tabletop  

Olaf said: GiGs said: This may be an obvious question, but how do you detect when dark mode is engaged? With the release of VTT dark mode, roll20 provides an extra css class to target in the character sheet: body.sheet-darkmode . With this you can include  styling that is specific for the sheet if the VTT is in dark mode. Thank you! I was looking at this the wrong way, wondering how character sheets got information about the DOM (which they usually can't), but using CSS variables is the sensible solution. Thanks!

Tommi said: I tested the Dark Mode and theme for the HM3 sheet just now and to me both the roll templates and the armor profile sections appear washed out, suffering from loss of contrast as if the Dark Mode had applied a light grey semi-transparent overlay on top of them. Other sections appeared all right in Dark Mode.  Tommi please have a look again at your convenience. I've updated the c styling based on your feedback, and the roll templates had also been improved by roll20. Let me know what you think. 

The armor profile section is improved, I think, but the roll templates not so much, I'm sorry to say. If you look at the screen cap below, the roll template numbers are all very, very hard to see. Sure, you can see the roll result text easily, but the actual numbers are still too low contrast for me. I think, for dark mode, they ought to be black numbers on yellow background.

HI Tommi, thank you for the update . Sheet authors don't have any control (yet) over the dark mode of roll templates. As my screens look different, with better contrast, have you tried disabling/enabling dark mode again? And perhaps have a look at another browser? Curious as to why there is a difference.

Cache has to be cleared, or else the browser seems to store the yellow background and use it for both light and dark mode.  If you are on the reddit discord server, you can see my confusion about seeing different things on different browsers in the "custom-charsheets" text channel if you scroll back to March 6th.

Great tip, thank you Kraynic

Kraynic said: Cache has to be cleared, or else the browser seems to store the yellow background and use it for both light and dark mode.  OK, that did it. Now I get the purple background on roll templates instead of the yellow when in dark mode. Much better.

Tommi said: OK, that did it. Now I get the purple background on roll templates instead of the yellow when in dark mode. Much better. I'd like your feedback Tommi, as we can now also target the roll templates for styling in dark mode. I have updated the styling so the follow the solarized theme in light and dark which is designed for pleasing contrast in light and dark. Exceptions are the roll results (following roll20 styling still) and the success/fail/crit row, which i've kept as-is from the original sheet. To me this looks better in dark mode, previously the templates were too light in my eyes. I've included a screenshot here, what do you think of legibility?

As a sheet author, I'm looking forward to see your code for roll template darkmode, haven't had time to dive into dark mode yet, and you're among the first to get going with the rolltemplate part of it. Nice to see your WIP is already on gihub , your way of changing values for CSS variables between normal and darkmode is what I was thinking about too, really streamlines things. In my eyes, the "Failure" and "Marginal Success" in dark mode could be a bit darker, but on the other had it might be good for the "Degree of success"-parts to have unchanged colors between dark & light mode. I'm not a user of the sheet so don't listen too much to my opinions :)

The new roll template for dark mode looks good to me. There is enough contrast and it is very legible. I would keep the coloring of success levels the same between modes. That way they remain easily identifiable at a glance. The dark mode versions *might* be slightly darker, if wanted, but for me that's not necessary.

Thanks Tommi, I've submitted a pull request for the roll template styling update I decided by the way to keep colors for degrees of success the same for both modes, to keep them easily recognisable 

Update: the styling update for the roll templates is now live. Feel free to report any glitches or oversights here