Dark Mode with CSS Variables

Implementing dark mode without a heavy theming library comes down to a stable token contract and a media query. This snippet covers the system-preference dark mode using `prefers-color-scheme`, a class-based override that lets users opt in or out, and a per-component theme that nests tokens for a single section.

CSS

Medium

3 snippets

css-selectors

css-variables

css-media-queries

code-template

580 views

System preference dark mode

Ask AI

:root {
    --bg: white;
    --fg: hsl(220 15% 15%);
    --accent: hsl(220 90% 50%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(220 20% 10%);
        --fg: hsl(220 15% 92%);
        --accent: hsl(220 90% 65%);
    }
}

body {
    background: var(--bg);
    color: var(--fg);
}

Defining tokens (--bg, --fg, --accent) at :root gives every consumer a single source of truth. The prefers-color-scheme: dark media query overrides the same variables when the OS prefers dark, which automatically themes every element that references them. This is the lowest-overhead path to a respectful dark mode, since it follows the user's existing preference without any UI. The accent stays the same hue but lightens for dark mode so it keeps passing contrast on the new background.

Class-based override

Per-component theme

Back to Code Snippets