1
HTML/CSSIntermediate#css#position
HTML/CSSIntermediate#css#variables#responsive
How would you implement a dark mode toggle using CSS?
Combine CSS custom properties for theme colors with either the prefers-color-scheme media query for automatic OS-based detection, or a data attribute/class toggled by JavaScript for manual user control, overriding the variables.
Example
:root { --bg: white; --text: black; }
[data-theme="dark"] { --bg: #1a1a1a; --text: #f0f0f0; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --bg: #1a1a1a; --text: #f0f0f0; }
}
body { background: var(--bg); color: var(--text); }