The Dark Side of the Web
summary
Concrete changes and tools: uses CSS media queries with prefers-color-scheme to swap color variables, moves light/dark palettes into separate roots, and in Tailwind enables dark mode via the Tailwind dark keyword or media option. Handles SVG labels with fill white and sometimes !important, notes the work took ~100 lines of code, and stresses checking WCAG contrast ratio targets. Verifies behavior using Safari’s forced dark/print toggles, Chromium Lighthouse and rendering emulation, and Firefox’s accessibility color emulation.
AI-written summary · about
chapters (6)
related talks
16mBuilding color palettes for the modern web
32mThe Future of Utility-First CSS: What Tailwind v4 Signals for Web Development
28mBuilding the Dark Mode of Your Dreams with Color Science
43mWelcome... to the Dark Side?
19mWhen colour theory meets technology
11mChrome DevTools for designers
06mDesign Accessibly: Color Contrast Tips and Tools
15mAccessible by law! Generating colors with JS and CSS Custom Properties