Mastodawn

I spent a few hours making my website stylesheets support dark and light themes as requested by the browser. I'm not sure why more sites don't support it - it's not that hard!

First you define your colours as variables:

@media (prefers-color-scheme: light) {
    :root {
        --background: rgb(98%, 98%, 98%);
        --text: rgb(10%, 10%, 10%);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --background: rgb(10%, 10%, 10%);
        --text: rgb(90%, 90%, 90%);
    }
    img { filter: brightness(85%) }
}

And then you use them in your stylesheet:

html {
    background-color: var(--background);
    color: var(--text);
}

#WebDev #DarkMode #Accessibility