Dark Mode
An alternative color scheme with light text on dark backgrounds, reducing eye strain and saving battery on OLED screens.
Dark mode is a UI color scheme where the primary background is dark (near-black or dark gray) and text is light. It reduces eye strain in low-light environments, saves battery on OLED screens, and is a strongly preferred option for many developers and users.
Implementing dark mode requires a consistent token system. Instead of hardcoding colors ("bg-white text-black"), you use semantic tokens ("bg-surface text-primary") that resolve to different values based on the active theme. Tailwind's "dark:" prefix makes this straightforward: "bg-white dark:bg-gray-900" applies white in light mode and dark gray in dark mode.
The technical implementation involves: a theme provider that tracks the user's preference, a class or data attribute on the root element, CSS custom properties for color tokens, and localStorage persistence so the preference survives page refreshes.