Why it matters
Many users run their OS in dark mode; a bright page at night is jarring. Not required, but expected of polished sites.
How to fix it
Define semantic color tokens for light and dark and switch with @media (prefers-color-scheme: dark) or a class set before paint.
Example
@media (prefers-color-scheme: dark) { :root { --bg: oklch(0.16 0.01 270); --fg: oklch(0.95 0 0); } }More design rules
void design reports 19 rules in this category. Measured design heuristics from computed styles: font families, type scale, line length, palette and accent sprawl, spacing grid, radius sprawl, dark mode and the tells of generated UI.
gradient-textGradient-filled heading textpurple-gradientPurple/indigo gradient backgroundemoji-iconsEmoji used as iconsspacing-off-gridSpacing values are off the 4px gridradius-sprawlToo many different corner radiicolor-scheme-missingcolor-scheme is not declaredselection-unstyled::selection is not styledhorizontal-overflowPage scrolls horizontally at 375px