Stuck on styling roll templates with dark mode

I've scoured through the forum posts and the guide here:&nbsp; <a href="https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode</a> but can't seem to make it work. Some helpful clarification on the documentation would be (especially for us newly learning coders): What do you mean you need 3 classes to override darkmode? Do you need to replace your existing rolltemplate class? Wrap the former entire roll template in a new div? Do all your roll templates just have to be called "sheet-rolltemplate-template" now? Or is it "sheet-rolltemplate-(yournamehere)" Is there an example of a previous sheet code, updated to work with dark mode Roll Templates specifically that can be shared in a condensed way, besides referrals to large sheets? A bit more thorough documentation could really help with the confusion of a relative noob like me. Anyways, here's my code I'm trying to style I think. I can include more code if I'm missing something. HTML: &lt;rolltemplate class="sheet-rolltemplate-dodas1"&gt; &lt;table&gt; &nbsp; &nbsp; &lt;caption&gt;{{name}}&lt;/caption&gt; &nbsp; &nbsp; {{#allprops() }} &nbsp; &nbsp; &nbsp; &nbsp;&lt;tr&gt;&lt;td&gt;{{key}}&lt;/td&gt;&lt;td&gt;{{value}}&lt;/td&gt; &nbsp; &nbsp; {{/allprops() }} &lt;/table&gt; &lt;/rolltemplate&gt; CSS: (I included the first bracket as something that is working previously, the second bracket is not) /* this part works fine, I think? Though tbh not sure what the href is referring to. */ .sheet-rolltemplate-dodas1 a[href^='!'],.sheet-rolltemplate-dodas1 a[href^='~'] { &nbsp; &nbsp; background-color: #6f120c; &nbsp; &nbsp; padding: 1px 0px 0px 0px; &nbsp; &nbsp; color: white; &nbsp; &nbsp; height: 17px; &nbsp; &nbsp; width: 18px; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; border: 1px solid white; } /* this appears to do nothing */ .sheet-rolltemplate-template .sheet-template-wrapper .inlinerollresult { &nbsp; &nbsp; color: black; } /* also tried .sheet-rolltemplate-dodas1 but no luck */ Any help would be much appreciated. Thank you!

If you want miore documentation, have I the site for you: <a href="https://cybersphere.me/roll20-sheet-author-master-list/" rel="nofollow">https://cybersphere.me/roll20-sheet-author-master-list/</a> Regarding needing 3 classes, you probably need to look at: <a href="https://cybersphere.me/specificity-and-inheritance/" rel="nofollow">https://cybersphere.me/specificity-and-inheritance/</a> For dark mode, specifically: <a href="https://cybersphere.me/your-own-styles-on-roll20/" rel="nofollow">https://cybersphere.me/your-own-styles-on-roll20/</a> (see the dark mode tab) For your questions, rolltemplates have to be "sheet-rolltemplate-(yournamehere)" so in your case "sheet-rolltemplate-dodas1" You do need to replace your 3existing class. You need CSS for how the rolltemplate looks normally, and a separate style for how it looks with dark mode on. You don't need to replace your existing rolltemplate in html. Adding the .sheet-darkmode class means it will use this class when darkmode is activated, and ignore it when its not. So the same HTML is used for both. For CSS to work in darkmode, you have to precede your classes with .sheet-darkmode and possibly more, depending what exactly you are going for. I might need a poage dedicated to darkmode on that site. Looking at it now, in isolation, it's not as clear as it could be.

Thanks for the documentation links! That's great! I tried adding .sheet-darkmode to the beginning of my final styling line. For context, this is my entire CSS for the rolltemplates. I thought by putting it at the end, it would have the highest order of specificity. Perhaps I'm missing something and need to add some more declarations to make it more specific? At present all I'm trying to do is change the text color to black (as it gets switched to white when in dark mode, even though the background color of the rolltemplate is something else. I could figure out how to change the background color as well later. /* custom roll templates */ .sheet-rolltemplate-dodas1 table { &nbsp;width:100%; &nbsp;background-color: white; &nbsp;font-family:"Palatino",Helvetica,sans-serif; &nbsp;border:1px solid rgba(112,32,130,1) } .sheet-rolltemplate-dodas1 caption { &nbsp;background: linear-gradient(180deg, #000000, #524949); &nbsp;color: #d5e0e0; &nbsp;text-align: center; &nbsp;bottom:0; &nbsp;font-weight:300; &nbsp;font-size:1.1em; &nbsp;padding: 5px 5px 0px 5px; } .sheet-rolltemplate-dodas1 td { &nbsp;padding:2px; &nbsp;line-height:1.4em; &nbsp;vertical-align:top } .sheet-rolltemplate-dodas1 td:first-child { &nbsp;font-weight:bold; &nbsp;text-align:right; &nbsp;min-width:50px; &nbsp;padding-right:10px; } .sheet-rolltemplate-dodas1 tr:nth-child(even) { &nbsp;background-color:#eee } /*custom roll template dodas damage */ .sheet-rolltemplate-dodasdmg table { &nbsp;width:100%; &nbsp;background-color: #732f2f; &nbsp;font-family:"Palatino",Helvetica,sans-serif; &nbsp;border:1px solid rgba(112,32,130,1) } .sheet-rolltemplate-dodasdmg caption { &nbsp;background: linear-gradient(180deg, #000000, #524949); &nbsp;color: #d5e0e0; &nbsp;text-align: center; &nbsp;font-weight:300; &nbsp;font-size:1.1em; &nbsp;padding: 5px 5px 0px 5px; } .sheet-rolltemplate-dodasdmg td { &nbsp;padding:2px; &nbsp;line-height:1.4em; &nbsp;vertical-align:top } .sheet-rolltemplate-dodasdmg td:first-child { &nbsp;font-weight:bold; &nbsp;text-align:right; &nbsp;min-width:50px; &nbsp;padding-right:10px; } .sheet-rolltemplate-dodasdmg tr:nth-child(even) { &nbsp;background-color: #eee; } button[type=roll].sheet-d6-dice::before { &nbsp; &nbsp; font-family: 'dicefontd6'; &nbsp; &nbsp; content: 'F '; } .sheet-rolltemplate-dodas1 a[href^='!'],.sheet-rolltemplate-dodas1 a[href^='~'] { &nbsp; &nbsp; background-color: #6f120c; &nbsp; &nbsp; padding: 1px 0px 0px 0px; &nbsp; &nbsp; color: white; &nbsp; &nbsp; height: 17px; &nbsp; &nbsp; width: 18px; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; border: 1px solid white; } .sheet-darkmode .sheet-rolltemplate-dodas1 .sheet-template-wrapper .inlinerollresult { color: black; }

As a short term solution, I added some specificity to the existing template to include "color: black;" for all of the table text, td, and td nth child etc. That seems to work for now. But it would still be nice and easier to have separate darkmode styling. Also, the .inlinerollresult dice color seems to override any styling I apply either way. When I switch to dark mode.

fyi: for rolltemplates use .sheet-rolltemplate-darkmode. ie .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodas1

Alright. I tried this, and it doesn't seem to be doing anything. .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodas1 .textchatcontainer .inlinerollresult { &nbsp; &nbsp; background-color: #303030; &nbsp; &nbsp; color: white; }

Daniel S. said: Alright. I tried this, and it doesn't seem to be doing anything. .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodas1 .textchatcontainer .inlinerollresult { &nbsp; &nbsp; background-color: #303030; &nbsp; &nbsp; color: white; } The .textchatcontainer is breaking it. That class does not exist anywhere in a roll template; it's the container for the whole chat window, which we cannot style from sheets.

That worked like a charm, thanks! I think I should be able to style the other dark mode properties from there. I'll check in again if I get stuck, but thanks so much for the help!