Color Preference

Detect a light or dark theme using just CSS.

Color Scheme:

This page is using only CSS in order to detect the browser's preference for a color scheme. This is accomplished using media queries.

@media (prefers-color-scheme: light) {
    // Add CSS here
}

@media (prefers-color-scheme: dark) {
    // Add CSS here
}

For example, you could look at the CSS that is used to add the "Light" or "Dark" word into the HTML: color-preference.css.