Why it matters
Without color-scheme, native controls, scrollbars and the canvas default stay light even on a dark theme, causing flashes and mismatched form controls.
How to fix it
Declare the color schemes your page supports on :root and in a color-scheme meta tag, so the browser can theme built-in UI before CSS loads.
Example
:root { color-scheme: light dark; }
<meta name="color-scheme" content="light dark">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 radiino-dark-modeNo dark mode supportselection-unstyled::selection is not styledhorizontal-overflowPage scrolls horizontally at 375px