Design Education · Dark Mode
Dark Mode
Uinta Mountains, UT
Dark mode swaps a site’s light canvas for deep, low-luminance tones — easing eye strain in dim
environments, saving battery on OLED screens, and giving color and photography room to glow. But a good
dark theme is never just an inverted light theme: backgrounds sit a little above pure black, text sits a
little below pure white, and every color is re-checked for contrast. Under the hood it’s built on CSS
custom properties, a prefers-color-scheme media query to honor the visitor’s system
setting, and a small script that remembers their choice. Done well, dark mode is less an aesthetic and
more an act of courtesy — the interface adapting to the person, not the other way around.
The core principle: the user decides
Flip the switch and watch the whole page re-theme. Every color on this page is a CSS custom property
— one attribute change on the <html> element swaps the entire palette, the
transition is animated in CSS, and your choice is saved to localStorage so it survives a
reload. On first visit, the page reads your operating system’s preference instead of guessing.
Contrast lab: why dark mode isn’t inverted colors
Night reading
Pure white text on pure black looks dramatic but can “halate” — glow and smear for many readers. Soften both ends and the text stays comfortable for long sessions.
17.6 : 1
Drag the sliders and the page recomputes the WCAG contrast ratio live, using the same relative-luminance math accessibility auditors use. Body text needs at least 4.5 : 1 (AA) and ideally 7 : 1 (AAA). Notice that simply inverting a light palette often fails — dark themes need their own tuned colors, not flipped ones.
