@mrpbennett

CSS Dark Mode

With dark mode finally coming to iOS in update 13. We can start to make use of the awesome the prefers-color-scheme media query that has two effective values you can specify: light and dark:

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        background: white;
        color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        background: black;
        color: white;
    }
}

Variables now in CSS, making dynamic light and dark modes for your visitors easier than ever.

:root {
    --body-bg: #fafafa;
    --body-color: #555;
    --link-color: #222;
    --link-color-hover: #000;
}
@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: #212529;
        --body-color: #6c757d;
        --link-color: #dee2e6;
        --link-color-hover: #fff;
    }
}

You should use this time to experiment with how you’d adapt your own styles to put the new media query to work. While you're at it you might as well check which browsers support this greatness.