Erik Johannes Husom

Dark mode on a website

30 Jan 2021

I just discovered that it is quite easy to make a website adjust the style to whether the client is using dark mode or not. Take a look at a snippet of my CSS for this website:

* {
    --txc: #393838;
    --lc: #1183b9;
    --bgc: #fff;
    --hlc: #70b4d5;
}

@media (prefers-color-scheme: dark) {
    * {
        --txc: #f5f5f5;
        --lc: #70b4d5;
        --bgc: #212121;
        --hlc: #1183b10;
    }
}

The first block defines the default values for two text colors, the background and a highlight color. With the second block, those variables are redefined if the user is using a dark system theme.

This might be common knowledge for a lot of people, but have not seen this functionality much “in the wild”. Maybe some people prefer to keep the same colors anyway, but I think it is very comfortable that websites dynamically adapt to the system theme, especially when there are lots of articles.