css/light-dark-color-scheme

Why

light-dark(a, b) returns the dark value only when the element's used colour scheme is dark, and that comes from the color-scheme property (or the color-scheme meta tag). Without it the page always shows the light values, whatever the person chose in their system, and form controls and scrollbars stay light too.

Fix

Add color-scheme: light dark; to :root (or <meta name="color-scheme" content="light dark"> in the document head). For a forced theme toggle, set color-scheme: dark or light on the root element from the toggle.

Examples

/* bad */
:root { --bg: light-dark(#fff, #121212); }
/* good */
:root { color-scheme: light dark; --bg: light-dark(#fff, #121212); }

Sources

• MDN, light-dark()
• MDN, color-scheme

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/light-dark-color-scheme