Styling & CSS · Color
Dark Mode
Also called: Dark theme, Night mode, Dark UI
A color scheme with a dark background and light text. It can switch automatically with the system setting, or let users choose it manually.
In detail
Dark mode isn't just inverting the colors. Common practice: use dark gray for the background (like #121212) instead of pure black, and white text with slightly lowered brightness. The higher the layer (cards, dialogs), the lighter its background, using differences in lightness instead of shadows. Make the primary color a bit lighter and less saturated so it doesn't glare.
To build it, you usually define colors as CSS variables and swap their values in dark mode. To follow the system, use the prefers-color-scheme: dark media query. For a manual toggle, add a dark class or a data-theme attribute on the html tag, and save the choice to local storage. Tailwind uses the dark: prefix for dark styles.
Easy things to miss: colors in images and charts, the code highlighting theme, colors hard-coded in components, and a white flash when the page refreshes.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-dark-mode- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026