Need help with dark mode and roll templates

Background: I am converting my custom character sheet from legacy to CSE, including adding support for Dark Mode. I have the sheet all done, but I need help with the roll template. I am following the guidance of this page:&nbsp; <a href="https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode</a> I need a little more input than this example provides: &lt;rolltemplate class="sheet-rolltemplate-template"&gt; &nbsp; &lt;div class="template-wrapper"&gt; &nbsp; &nbsp; &lt;!-- Template content here --&gt; &nbsp; &lt;/div&gt; &lt;/rolltemplate&gt; .sheet-rolltemplate-template .sheet-template-wrapper .inlinerollresult{ &nbsp; /*Your styling here*/ } The default output for the roll results is black font on a purple background, which is impossible to read. I have no idea how to change this. Any help would be greatly appreciated. -Sean

The default styling is for when light or dark mode is on. To have a "dark mode only" style, you need to include that. like this: .sheet-darkmode .sheet-rolltemplate-template .sheet-template-wrapper .inlinerollresult{ &nbsp; /*Your styling here*/ }

Though I wouldnt use the name template for your rolltemplate, I'd change it to something innocuous like "example" or "test" just to make sure there is no clashing.

Thank you for your reply... I am making some progress, but still need some help. What I am not understanding is how the "toggle" between light mode and dark mode works for the Roll Templates. Following the examples as best I can, h ere is my roll template: &nbsp; &nbsp; &lt;rolltemplate class="sheet-rolltemplate-trait"&gt; &lt;div class="sheet-rolltemplate-wrapper"&gt; &lt;div class='sheet-container'&gt; &lt;div class='sheet-header'&gt; {{#name}}&lt;div class='sheet-name'&gt;{{name}} Trait Test&lt;/div&gt;{{/name}} {{#skill}}&lt;div class='sheet-skill'&gt;Trait Check - {{skill}}&lt;/div&gt;{{/skill}} &lt;/div&gt; &lt;div class='sheet-content'&gt; {{#allprops() name skill trained fatigue wounds anxiety}} &lt;div class='sheet-key'&gt;{{key}}&lt;/div&gt; &lt;div class='sheet-value'&gt;{{value}}&lt;/div&gt; {{/allprops() name skill trained fatigue wounds anxiety}} {{#fatigue}}&lt;div class='sheet-desc'&gt;Fatigue = {{fatigue}}&lt;/div&gt;{{/fatigue}} {{#wounds}}&lt;div class='sheet-desc'&gt;Wounds = {{wounds}}&lt;/div&gt;{{/wounds}} {{#anxiety}}&lt;div class='sheet-desc'&gt;Anxiety = {{anxiety}}&lt;/div&gt;{{/anxiety}} &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &nbsp; &nbsp; &lt;/rolltemplate&gt; Here is the dark mode setting that I am trying to get in place via the CSS code: .sheet-darkmode .sheet-rolltemplate-trait .sheet-template-wrapper .inlinerollresult { color: #FFFFFF; } The color does not change to white when dark mode is toggled.

Where does this class come from: .sheet-rolltemplate-trait ? I don't see it in your code. Try removing that from your CSS. This has the same specificity: .sheet-darkmode .sheet-template-wrapper .sheet-container .inlinerollresult Edit: Oops, it's the template name. Still, try the alteration.

Again... Thank you for taking the time to try an help me.&nbsp; I cut-and-paste the line&nbsp; .sheet-darkmode .sheet-template-wrapper&nbsp; .sheet-container&nbsp; .inlinerollresult &nbsp;&nbsp;and it had no effect. I tried as many permutations/combinations as I could think of, but no luck. In the "normal' stylesheet, I can set the color to the roll result by doing this: .sheet-rolltemplate-trait .sheet-content .sheet-value { &nbsp; color: #fa908c; } This sets the color for both light and dark mode. I tried this, with no luck: .sheet-darkmode .sheet-rolltemplate-trait .sheet-content .sheet-value { &nbsp; color: #fa908c; } Could you point me to a working sheet from the Git library. Maybe if I copy something that is working, I'll have better luck.

I don't know which sheets on github use it. (There are some, I'm sure, but I only use my own sheets.) Can you post your entire html and css pages, somewhere like pastebin.com and I'll test it and figure out why it isnt working.

Please be kind... You will see that my development skills in HTML/CSS/Javascript aren't very strong. My ability to cut-and-paste is.&nbsp; :) I load these files in the Custom Sheet Sandbox for my development and testing. The rolltemplate definitions are at the bottom of the sheet. The darkmode code is at the bottom of the css. I have left my hacking attempts in place.: <a href="https://irish-bastard-gaming-s3-1.s3.amazonaws.com/SavageWorldsGothic.sheet" rel="nofollow">https://irish-bastard-gaming-s3-1.s3.amazonaws.com/SavageWorldsGothic.sheet</a> &nbsp; &nbsp; &nbsp;&lt;- I changed the suffix so it will download instead of display. It's normally .html <a href="https://irish-bastard-gaming-s3-1.s3.amazonaws.com/SavageWorldsGothic.css" rel="nofollow">https://irish-bastard-gaming-s3-1.s3.amazonaws.com/SavageWorldsGothic.css</a> &nbsp; &nbsp; &nbsp;&nbsp;

Don't worry, I didn't look closely at the code (we all start somewhere. The end result - the sheet itself - looks very pretty and that's what matters). I did find the problem, and it was a syntax issue - my suggestion was wrong. It turns out you have to do this: .sheet-rolltemplate-darkmode.sheet-rolltemplate-trait .sheet-content .sheet-value Roll templates have their own styling rules and you apply dark mode differently than the normal character sheet (don't worry, I didn't know this either!). The darkmode class is applied at the same level as the rolltemplate class, so you have no space between them. use .sheet-rolltemplate-[rolltemplate-name].sheet-rolltemplate-darkmode or .sheet-rolltemplate-darkmode.sheet-rolltemplate-[rolltemplate-name] (the order doesn't matter) Obviously don't include the [ ] brackets!

This works great, thank you. :)