Difficulty with Star Wars Saga Edition dark mode

Preface: I'm a complete coding noob who copies/pastes most of my code, and I only understand half of it. <a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Star%20Wars%20Saga%20Edition/StarWarsSagaEdition.css" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Star%20Wars%20Saga%20Edition/StarWarsSagaEdition.css</a> I'm trying to add dark mode to the SWSE sheet, but it seems like nothing that I do will change anything on the sheet when dark mode is turned on. I noticed this attribute in the sheet.json file: "legacy" : true , When I changed that to false, dark mode began working on the sheet... but it completely broke the formatting. Is it possible to add dark mode to a legacy sheet, and if so, how? I've been bashing my head against this problem for hours now, and I don't think I'm going to figure it out on my own.

Here's what the wiki had to say, with existing sheets that have dark mode integration:<a href="https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode</a>.&nbsp; I didn't see any mention of setting a sheets legacy setting. Seems to be a matter of CSS changes authors make to their sheets so they look better when the Roll 20 UI is set to dark mode, but laking that there is no effect to the sheets.&nbsp;

I can see that I can change the color of the sheet using... .charsheet { color: #000; background-color: #fff; } But when I try to add... body.sheet-darkmode .charsheet { color: #b7dfef; background-color: #444460; } ...nothing changes. I see that a number of sheets don't have body in there, and just do ".sheet-darkmode .charsheet", but I've tried changing that as well, with no luck. Same thing with other classes. I can change the color of any class, but I can't figure out how to get it to change with dark mode. div.sheet-record { color: #0e0e0e; font-size: 14px; font-weight: bold; text-align:center; font-family: 'play'; width:300px; float:right; } body.sheet-darkmode div.sheet-record { color: #0000bb; } Here's another example of something that doesn't work. I've gone through all of the Roll20 sheets on GitHub from # to M, trying to find some hint of how to use dark mode for this sheet. I feel like I could get everything taken care of if I could just figure out how to change something . But the only thing that's worked was changing the legacy attribute, which broke the sheet.

I empathize with you.&nbsp; CSS is probably my least favorite aspect of sheet building, but I've learned a few things that might help you out.&nbsp; CSS, or Cascading Style Sheets, has two main concepts you need to bear in mind that will make your life easier: 1) precedence and 2) specificity. The C in CSS relates to precedence.&nbsp; What cascading &nbsp;means here is that styling instructions in your CSS file are applied from top to bottom, with the styling instructions that occur later in your CSS file have the highest precedence over styling instructions that occur earlier in your CSS file.&nbsp; Such that, if you have set a border color on a class early in your CSS file, and then set a different border color on the same class later in your CSS file, the color that occurs later in your CSS file will be applied. Next is specificity...and this one is the most frustrating in Roll20 but is likely what's vexing you.&nbsp; The most specific styling instructions will win out over less specific styling instructions and will be applied.&nbsp; OK, cool, but what the F does that mean?!&nbsp; This is where classes come in because they indicate what styling instructions should be applied to a component.&nbsp; Think of CSS as a hierarchy, such that components are upstream or downstream of each other.&nbsp; Example: &lt;div class="parent"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="child-1"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="child-1-1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input class="character-attribute" name="attr_str" type="number" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="child-2" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &lt;/div&gt; If you want to apply styling instructions to the input above, you can indicate .character-attribute in your CSS file but if Roll20 has styling instructions more specific than&nbsp; .character-attribute &nbsp;then your styling will not apply.&nbsp; You will need to be more specific with the classes indicated, such as .child-1-1 .character-attribute .&nbsp; Notice that I've used the class upstream of the input component and in the hierarchical order they are applied.&nbsp; The higher up the hierarchy&nbsp;of classes you specify will have greater precedence in your CSS.&nbsp; Such that, .parent .child-1 .child-1-1 .character-attribute &nbsp;would be the most specific in the example above. Here's how you can troubleshoot and investigate your CSS and see Roll20's CSS, whether you need to override Roll20 CSS or understand why your CSS is not applying.&nbsp; Looking at your sheet, right-click on the component to investigate and select Inspect (in Chrome, could be different in other browsers).&nbsp; This will open the developer Elements view.&nbsp; Here you will see all the raw HTML and CSS, and it will be a mess.&nbsp; Your sheet's HTML and CSS will be encapsulated in all the Roll20 HTML and CSS.&nbsp; Fortunately, what you right-clicked on will be in focus, so you shouldn't have to hunt around.&nbsp; Put both browser windows side-by-side because what you mouse over in the developer window will be highlighted in your sheet window to help you navigate.&nbsp; In this way you will be able to start understanding the relationship between elements. OK, long story short, I played around with this dark mode stuff last night and I got it to work by being more specific than Roll20 by indicating the following classes: body.sheet-darkmode .ui-dialog .tab-content .charsheet .&nbsp; I probably didn't need to use "body", as you've seen other sheet authors did not.&nbsp; I read somewhere that when you indicate a component like "body" or "div" or "input" this is more specific but can also impact performance as the browser needs to check all instances of "body" or "div" or "input" to see if your styling instructions should apply to the component, and this method should only be used if you must be so specific.&nbsp; Otherwise, stick to classes where possible.&nbsp; Make a specific class for specific styling of a component instead.

Thank you. That was a very clear and informative explanation. I'll try this out.

I have confirmed that this is a Legacy sheet issue. Using Inspect, I was able to add elements that would change color of different parts of the sheet, exactly as intended. But when I tried copying/pasting them into the CSS file, they wouldn't show up. Then I found this in in Inspect Elements. ...wait, that's not what my CSS file says! It's adding a .charsheet class in front of the other classes! (I had wondered how that class was changing the color, despite not appearing anywhere in the HTML file. Now I know.) Advanced DnD 1E, Mouseguard, and Numenera are all legacy sheets, and they all have the same issue of having .charsheet added before the other classes in their CSS. Except for the .sheet-rolltemplate classes, that is. Those seem to work as intended. I looked through every single character sheet that received changes to their .css files since dark mode was released. There are only a few dozen, which is surprising given how easy it is to add dark mode for most sheets. Of those, only 2 were Legacy sheets that were trying to change the character sheet and not just the roll templates: Advanced DnD 1E, and Low Fantasy Gaming. Neither of those dark modes seem to work. I don't know if there's a way around the Legacy issue, but I've gotta take a break again.

Dark mode css just doesn't work with legacy mode (at least on the character sheet itself). This is because the legacy sanitization deliberately prepends the CSS selectors with .charsheet &nbsp;if it isn't already the first selector in the selector. The dark mode class however exists much higher up the hierarchy of elements than that (all the way the body &nbsp;element). To create a dark mode on the sheet, you have to switch from legacy sanitization. That said, switching from legacy sanitization should be relatively painless: Remove the legacy flag of course Prepend all your sheet related css selectors with .ui-dialog .tab-content .charsheet If the sheet- &nbsp;prepend is not used in your html, then remove it from the css everywhere except &nbsp;for in your roll template css Those three steps should allow you to switch from legacy with as little fuss as possible, and without having to rewrite any styles. However, you will likely need to do some style rewriting and refactoring t o really do a quality dark mode switch. Things that I recommend for setting up easy color switches between dark mode and light mode: Use CSS variables for all &nbsp;your colors. Note that I don't mean that every use of a color should be a separate variable, but you should have a variable for each type of color on the sheet. (e.g. borderColor, backgroundColor, etc) Define the initial state of your color variables in the body &nbsp;element (note that this would not &nbsp;be prepended with the selectors from #2 above) Then define the dark mode state of your color variables in body.sheet-darkmode

Thanks, Scott. I'm glad that it wasn't that the sheet was made in an idiosyncratic way or something. Sounds like a project for another weekend, though.

In case anyone else is updating their legacy sheets, here was my experience. Scott's post was mostly right, except I ended up having to add sheet- to a number of classes, both in the HTML and the CSS files. The .sheet-rolltemplate-darkmode was added to the end of existing rolltemplate classes. I really admired how the Harnmaster3 CSS was put together with different variables for colors, but I couldn't end up getting them to work. So I just have a bunch of Hex color tags.

Happy to see I'm not the only one still using this sheet! Stephen C., if that's you making the recent changes, THANK YOU . :)

You only need to add sheet- to most classes if they are specified in the html. With a legacy to non-legacy sheet you have two options. Either will work. make sure classes in HTML do not have sheet-, and remove sheet- from all classes in CSS. Set classes in html to have sheet-, and make sure classes in CSS also start with sheet-. It's about making sure your HTML and CSS are the same. In legacy mode, HTML and CSS worked differently - if classes in HTML did not have sheet- prepended, it was added in the CSS. So you could easily have different classes in html and CSS. But with CSE (which replaced Legacy), they have to be identical. There is of course a complication: in CSS, rolltemplates and darkmode must have sheet- prepended manually if it doesn't exist or they aren't recognised.

It is indeed me making those changes. And the first thing that I tried was removing sheet- prepend from everything in HTML and CSS. And it looked like a hot mess still, even after the switch to CSE. But for some strange reason, things started working as I started adding the prepend back to the HTML and CSS. I've learned a lot about this process since I started this topic, and I agree intellectually with what you're saying, GiGs. But the code had other thoughts on the matter, and I went with what worked rather than what's merely supposed to work.

Adding sheet- to both HTMl and CSS is the safer approach. If you remove it from both (which is the theoretically "better" method"), you run into the problem that some sections of the CSS will not work - they need .sheet-. So if you go that route, you need to be able to identify which parts of the code need it and which should not have it. If you simply prepend sheet- to everything, you completely avoid that problem. You don't need to care about which parts of the code need it and which don't. So if you don't fully understand Roll20's coding method (and I'm not sure even I do, I had to remember how tp handle darkmode just the day before yesterday), that's the method I'd recommend.