responsive
CSS Dark Mode with prefers-color-scheme
System-aware dark mode using CSS custom properties and prefers-color-scheme media query.
The cleanest way to implement dark mode is through CSS custom properties (variables) scoped to the prefers-color-scheme media query. Define your light palette as defaults and override in the dark media query — components automatically adapt without any JavaScript class toggling.
Usage Note
Apply variables on :root for global theming. For a manual toggle, add data-theme="dark" to <html> via JavaScript and define the dark overrides under [data-theme="dark"]. The media query handles the default system preference.
Tags
#dark-mode#prefers-color-scheme#css-variables#theming#accessibility