I empathize with you. CSS is probably my least favorite aspect of sheet building, but I've learned a few things that might help you out. 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. What cascading 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. 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. The most specific styling instructions will win out over less specific styling instructions and will be applied. OK, cool, but what the F does that mean?! This is where classes come in because they indicate what styling instructions should be applied to a component. Think of CSS as a hierarchy, such that components are upstream or downstream of each other. Example: <div class="parent">
<div class="child-1">
<div class="child-1-1>
<input class="character-attribute" name="attr_str" type="number" />
</div>
</div>
<div class="child-2"
...
</div>
</div> 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 .character-attribute then your styling will not apply. You will need to be more specific with the classes indicated, such as .child-1-1 .character-attribute . Notice that I've used the class upstream of the input component and in the hierarchical order they are applied. The higher up the hierarchy of classes you specify will have greater precedence in your CSS. Such that, .parent .child-1 .child-1-1 .character-attribute 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. Looking at your sheet, right-click on the component to investigate and select Inspect (in Chrome, could be different in other browsers). This will open the developer Elements view. Here you will see all the raw HTML and CSS, and it will be a mess. Your sheet's HTML and CSS will be encapsulated in all the Roll20 HTML and CSS. Fortunately, what you right-clicked on will be in focus, so you shouldn't have to hunt around. 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. 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 . I probably didn't need to use "body", as you've seen other sheet authors did not. 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. Otherwise, stick to classes where possible. Make a specific class for specific styling of a component instead.
