Official Pathfinder Clone not Dark Mode Compatible.

Hello. I'm almost completely ignorant when it comes to coding character sheets, but I really wanted a more streamlined version of the D&D 3.5 character sheet for a personal game. I noticed that the official pathfinder 1e sheet shares a very similar layout to the official 3.5 character sheets, so I went about modifying it. However, I can't for the life of me figure out how to make it darkmode compatible. I eventually just forced it into darkmode by adding an invert filter over everything contained in the html, but there's still a border around the contents of the sheet that I can't invert. Picture provided for context. Any help would be appreciated.

Hi Gregory, You basically create darkmode versions of the sheet's normal CSS.&nbsp; To make a darkmode version of a CSS rule, you would prepend a copy of that rule with ".sheet-darkmode".&nbsp; Roll template CSS rules need to be prepended with ".sheet-rolltemplate-darkmode"&nbsp; The darkmode CSS will only apply when the VTT darkmode is enabled. <a href="https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode</a>

vÍnce said: Hi Gregory, You basically create darkmode versions of the sheet's normal CSS.&nbsp; To make a darkmode version of a CSS rule, you would prepend a copy of that rule with ".sheet-darkmode".&nbsp; Roll template CSS rules need to be prepended with ".sheet-rolltemplate-darkmode"&nbsp; The darkmode CSS will only apply when the VTT darkmode is enabled. <a href="https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/Dark_Mode</a> I tried doing that and added ".sheet-darkmode" to ".sheetform" to invert the whole thing. I figured out that that's how the official sheet did it, but for some reason, it's not affecting anything. Would I have to add ".sheet-darkmode" to every rule to make any of them work? Does it matter that the sheet from github is legacy?

You shouldn't need to create a new rule for every CSS rule/class. But you will need to determine which ones need to be overridden with a darkmode version. For example; say there's a rule for the sheet's background and text color; .charsheet .sheet-background { &nbsp; &nbsp; background-color: #FFF; &nbsp; &nbsp; color: #000; } the sheet will have a white background and black text even in darkmode unless you create an additional rule to change it when the VTT is set to darkmode .charsheet .sheet-background { &nbsp; &nbsp; background-color: #FFF; &nbsp; &nbsp; color: #000; } .sheet-darkmode .charsheet .sheet-background { &nbsp; &nbsp; background-color: #000; &nbsp; &nbsp; color: #FFF; }

So, I removed the inversion filter from the sheet as a whole to start from square one with making the sheet darkmode compatible and not just force darkmode. I then added this to the end of the sheet. .darkmode .charsheet { &nbsp; &nbsp; filter:invert(0.88); } This is what it looks like now.