How to elegantly overwrite style sheet css (color-scheme:light only) for one page only

Help
1

My website consists of static html pages, mainly just semantic HTML. There are several style sheets, which I swap out as I change the look of the website (so older pages keep the old look, generally).

On top of that, I like to style individual pages depending on the contents. For example, set a different background or text colour. Like this DOS Gaming article with a retro theme.

I’m now moving towards better support for dark/light mode, and I find that these CSS overwrites often break things. I usually like to just apply theming to the light mode, and leave the dark mode to whatever the browser defaults are.

So for this example, I want to set the text colour of headings to red if the user is using light mode only.

The reference page is online here, which uses my latest style sheet I’m working on. For dark/light there is just:

html {
  color-scheme: light;}
    
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;}
}

I understand how to use the light-dark() function, but is it possible to just set the "light’ only?

Secondly - how can I target this on one page only? Currently I would just put some inline CSS on the heading tags, which is cumbersome. But the only way I know other than a page specific style sheet.

I’ve noticed it’s possible to use the CSS variable names from your stylesheet in the inline page CSS, but this feels, off? Is that bad practice? What if the variable gets renamed? It feels like a bad idea.

Actually, maybe using tags works here as long as there is never any specific colour declared in the main css file? Or hyper specific targeting with classes or something?

Any elegant ways to handle this!? Any and all thoughts appreciated.

2

The way I prefer it is to set all the specifics in their own variables, then inside prefers-color-scheme I change the variables to the dark (or light) variants. If you did it that way, then to override the light variant only on one page, you could add a section in the head of that page to change the variables as needed.

As for future-proofing, this may depend on how you build your site. Perhaps it would make more sense to give this page its own CSS file (which is included after the main one in the head), so that at least you think to look at it if you go changing things in the main file. Alternatively you could make a complete copy of the main CSS sheet as is and modify it for this page so that this one always stays the same. Doing it that way means future changes won’t affect this page, which I would normally consider a bad thing, but it sounds like what you’re wanting to do anyway.

3

How about inlining this below your .css include(s)?

@media (prefers-color-scheme: light) {
    h1 {
        color: red;
    }
}
4

you could add a div container to the specific page and write conditional css like so;

<body>
<div class="wizardpage">
<header>
header
</header>
<main>
<h1>Wizard-style Skating</h1>
[...]
</div>
</body>


.wizardpage {
@media (prefers-color-scheme:light) {
h1 {color:red;}
}

@media (prefers-color-scheme:dark) {
h1 {color:blue;}
} 
}

your stylesheet might end up kinda messy/big, but c’est la vie. i find inline css messy but i dont think there’s any real “problem” with it besides personal preference/ease of use/etc

5

Ah, yes that would be a nice way in case I want to keep it in the stylesheet. I guess even just putting a class on the tag would do it.

6

Well, this just works—thanks!

For some reason I’ve been under the illusion that linked style sheets take precedence over in-page css. Turns out they have the same specificity, so putting in the order suggested works exactly as you’d expect.

7

Thanks, yes with the above selector this will also work setting the existing variables. That saves a bit of duplication with accent colours or something.

Splitting off into new stylesheets (or scorched earth) is indeed my way of moving on to a new style, out with the old in with the new! (but keep the old ;-)