prefers-color-scheme - M0YNG.uk

Created 2021-07-13

Tagged

Hacking

Code

`prefers-color-scheme` is the magic sauce to get CSS to care about the user's preferred colour scheme - aka DARK MODE.

For a little while you have been able to toggle the theme on the HTTP version of my site between a dark theme and a light theme, but I wanted to respect your choice and present the theme you are most likely to want based on this CSS property.

Obviously this won't work with older browsers that don't support this property, or if you haven't set it, or something else is weird. But in these cases the CSS just gets ignored and you get my preference, a dark theme.

So, how does it work?

The CSS file has the default dark colours coded in as normal, which means they should always work as a fallback if this doesn't work, then we add some extra code, which overrides the dark colours if your browser presents a preference for a light theme.

@media(prefers-color-scheme: light) {
    body {
        background-color: #efefef;
        color: darkmagenta;
    }
    .themeToggles button,
    header,
    footer,
    h2,
    h3,
    a {
        color: darkmagenta;
    }
    img {
        border-color: darkmagenta;
    }
    *:focus, .themeToggles button:focus {
        background-color: #efefef;
    }
}

I don't do anything special if you prefer a dark theme, because that's the default and would be pointless extra code, although I have added a few comments into the CSS where those defaults are so I remember that may get overridden later and I need to make changes in other places too.

For now, I have just removed the ability to toggle the theme because I can't see a clean way to both follow prefers-color-scheme AND allow you to change it on the fly without just duplicating CSS. Hopefully this isn't an issue because we're trying to respect your preference so you're less likely to want to change the theme.

-+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+-

🖤 Black Lives Matter

💙🤍💜 Trans Rights are Human Rights

❤️🧡💛💚💙💜 Love is Love

Code snippets are licenced under the Hippocratic License 3.0 (or later.)

Page generated 2024-03-24 by Complex 19

-- Response ended

-- Page fetched on Sat May 18 22:24:46 2024