CSS Darkmode

24-08-2019

I was messing around with native darkmode on the web the other day, and ended up implementing prefers-color-scheme on mrkdwn.net as proof of concept.

prefers-color-scheme has three available keyword values:

• no-preference which indicates that the user has no preference, as to where the site should appear dark og light.
• light which indicates that the user prefers light mode
• dark, which indicates that the user prefers dark mode.

Example

/* Base color scheme (fallback) */
:root {
    --background-color: #fff;
    --primary-color: #157efb;
    --font-color: #151513;
    --border-color: #dfe1e7;
}

/* whitemode or fallback if user has no preference */
@media (prefers-color-scheme: light), 
       (prefers-color-scheme: no-preference) {
    :root {
        --background-color: #fff;
        --primary-color: #157efb;
        --font-color: #151513;
        --border-color: #dfe1e7;
    }
}

/* darkmode */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1e1e1e;
        --primary-color: #157efb;
        --font-color: #dedede;
        --border-color: #000;
    }
}

Browser Support

The prefers-color-scheme media query is only supported by Chrome, Firefox and Safari and Opera. This, however, should not stop you from implementing a similar solution on your website, as the site simply defaults to "white" mode if it's not supported.

Media query to detect if the user has set their system to use a light or dark color theme.