dark-mode

Implement dark mode using semantic tokens by structuring your design system into primitive, semantic, and theme token layers mapped to CSS variables, allowing consistent light and dark theming across web apps and frameworks.

Detect system color scheme preferences using the prefers-color-scheme media query to automatically adapt your application's theme, while also listening for system changes to update the UI dynamically across different frameworks.

Persist user dark mode preferences by saving their theme selection to localStorage, enabling user-driven toggles to override system preferences and maintaining the chosen theme across sessions with graceful fallbacks.

Dark mode requires accessibility considerations to ensure proper color contrast, visible focus rings, and respect for reduced motion preferences, guaranteeing that semantic tokens maintain readable UI standards in both light and dark themes.

You can use semantic color tokens to support both light and dark modes by mapping primitive colors to semantic roles, which then map to specific theme tokens, creating a scalable theming architecture across projects.

Theme switching fails to respect prefers-color-scheme when system preference detection is not properly wired to update semantic tokens, requiring a system that actively listens for media query changes and updates CSS variables accordingly.