🎮 light-dark() — one rule, both themes

Six color pairs are declared once in this page, with light-dark(light, dark). There is no @media (prefers-color-scheme: dark) block anywhere in the file. Watch the same declarations produce two different designs — then set color-scheme yourself and find the bug that catches everyone.

1 The same CSS, two schemes

Both cards below are styled by the identical five declarations. The only difference is the color-scheme on their container. This pair is always shown so you can see both outcomes no matter what your own device prefers.

Lightcolor-scheme: light

Monthly report

Your team shipped 24 changes this week, up from 18.

Darkcolor-scheme: dark

Monthly report

Your team shipped 24 changes this week, up from 18.

Notice the text cursor and placeholder in each search box, and the scrollbars if you shrink the window. color-scheme restyles the browser's own widgets too — that's a second job the media-query approach never did for you.

2 Now you drive color-scheme

This sets color-scheme on the preview below — exactly what document.documentElement.style.colorScheme = … does in a real theme toggle.

Your settingcolor-scheme: light dark

Monthly report

Your team shipped 24 changes this week, up from 18.

Following your system preference.

Your device currently prefers ….

3 Which argument won, and why

The struck-through value is the one the browser discarded for your current setting. Same source, different pick.

The values on the right are the colors that actually painted. Worth knowing: reading a custom property back with getComputedStyle() hands you the literal string light-dark(#ffffff, #1f2937), not a color — the function resolves only when a real property uses the value. This panel reads invisible probe elements inside the preview to get the resolved color.