kuda.ai

Darkmode Rules in CSS via media queries.

Created on April 9, 2025
web/design/css

The browser knows when the system settings use dark mode. In CSS, you can use that information with @media (prefers-color-scheme: dark).

In the example below, the default setting is color: black; for fonts, and background-color: white; for, well, the background.

On changing your system color theme, this will invert.

You should probably not use black and white, but hey, this helps understanding the concept.

* {
    color: black;
}

html {
    background-color: white;
}

@media (prefers-color-scheme: dark) {
    * {
        color: white;
    }

    html {
        background-color: black;
    }
}