How to adapt your websites to Dark Mode?

We all know that apple has introduced Dark Mode in the latest versions of it’s operating system, so now it is going to be common to update your websites with dark mode. Many websites have switcher for dark mode but you don’t need it anymore, it will select css properties according to the device state.

There are three possible values:

• no-preference (evaluates as false): the default value if the device doesn’t support a mode or if the user hasn’t made a choice
• light: the user has chosen a light theme
• dark: the user has chosen a dark theme

In practice, usage is insanely simple. For my own website, my CSS is entirely for the light theme and then I use @media (prefers-color-scheme: dark) to override the relevant pieces for my dark mode like such:

@media (prefers-color-scheme: dark) {
    body {
        color: #fff;
        background: #000;
    }

    a {
        color: #fff;
        border-bottom: 1px solid #fff;
    }

    footer p {
        color: #aaa;
    }

    header h1,
    header h2 {
        color: #fff;
    }

    header h1 a {
        color: #fff;
    }

    nav ul li {
        background: #000;
    }

    .divider {
        border-bottom: 1px solid #ddd;
    }
}

A nice touch with this is that the update is instantaneous, at least on iOS 13 and macOS Mojave with Safari; simply change the theme and the CSS will update without the need for a refresh!

I haven’t seen many websites provide an automatic dark mode switcher but I have a feeling it will become far more popular once iOS 13 is released later this year.