CSS custom properties + a data attribute + localStorage. The demo toggle is real — it remembers your last choice.
A toggle that lets users switch between two complete visual themes — a light version (white/off-white background, dark text) and a dark version (near-black background, light text). Many users prefer dark mode for night-time reading, reduced eye strain, or aesthetic preference. Offering both is now standard on quality websites.
The entire color system is built using CSS custom properties defined on the :root element. Two sets of values are defined — one for light, one for dark. Switching modes means updating the data-theme attribute on the HTML element, which triggers a different set of CSS variable values. JS saves the preference to localStorage so it persists. The prefers-color-scheme media query sets the default based on the user's OS setting.
Toggle the demo. Its preference is stored separately so it doesn't affect the rest of this site.
One color system, two appearances. Click the toggle in the top right and watch every surface, border, and accent smoothly transition. The setting persists across visits.
One set of CSS variables, swapped on data-theme.
Background and color animate over 0.35s ease.
localStorage remembers your last choice.
Implement a complete dark/light mode system. In CSS, define on :root: --bg:#FFFFFF, --bg-secondary:#F5F5F5, --text:#111111, --text-muted:#666666, --border:#E5E7EB, --accent:#2563EB. Define [data-theme='dark']: --bg:#0D0D0D, --bg-secondary:#1A1A1A, --text:#F1F1EE, --text-muted:#888888, --border:#2A2A2A, --accent:#3B82F6. Apply to all elements: background:var(--bg), color:var(--text). Add body { transition: background 0.3s ease, color 0.3s ease }. Toggle button: on click, toggle data-theme='dark' on the html element and save to localStorage. On page load: check localStorage first, then check prefers-color-scheme media query as fallback. Toggle button shows sun icon in dark mode and moon icon in light mode.