Skip to main content
PUBLIC.INTERNET
⚡ Instant Access🔒 Privacy First🆓 Always Free📱 Works Everywhere

CSS light-dark() Previewer & Generator

The CSS light-dark() function lets a single declaration return one color in light mode and another in dark mode, so you can theme a site without duplicating every rule inside a prefers-color-scheme media query. This tool builds and previews that setup for a small set of design tokens (background, text, border, and accent). Give each token a light value and a dark value, flip the Light and Dark toggle, and a sample card re-themes instantly using the function so you can confirm both schemes look right from one source of truth. It generates clean CSS with color-scheme: light dark on the root (the switch that makes light-dark() actually respond) plus a light-dark() custom property per token, ready to paste. Because the function keys off color-scheme rather than JavaScript, the same CSS follows the user's system preference automatically, and the tool checks whether your browser supports it so the preview never misleads you.

Set a light and a dark value for each token. The preview switches with the toggle, no media queries needed.

Scheme

Theme preview

This card uses the light-dark() function for its background, text, and accent. Flip the scheme to see both states from one set of declarations.

CSS

How to Use light-dark() for Theming
  1. Set each token's pair - For background, text, border, and accent, choose a light color and a dark color with the two swatches per row.
  2. Toggle the scheme - Switch between Light and Dark to confirm the sample card reads well in both states.
  3. Check the support note - The note confirms whether your browser renders light-dark() live or is simulating it.
  4. Copy the CSS - Copy the generated :root block; it sets color-scheme: light dark and one light-dark() variable per token.
  5. Apply the variables - Use var(--bg), var(--text), and the rest throughout your styles, and the theme follows the system preference.
Why This Tool?
 Adding dark mode the old way meant writing every color twice, once in the base rules and again inside a media query, and keeping the two in sync forever. light-dark() collapses that into one declaration per token, which is a real maintenance win, but the function has a catch that trips people up: it does nothing unless color-scheme is set, because that is what tells the element which branch to return. This tool always emits color-scheme: light dark alongside the tokens so your copied CSS works the first time. 
 Previewing both schemes side by side from the same declarations is the point. It is easy to pick a light palette that looks great and a dark palette that quietly fails, and a live toggle surfaces that before you ship. Driving the preview through color-scheme also means native form controls and scrollbars in the card adopt the right scheme, matching production behavior rather than a faked dark background. 
 This is modern, JavaScript-free theming that respects the user's system setting by default. The generator removes the two gotchas (forgetting color-scheme, and not seeing both modes) so you can adopt the function with confidence.