IconVault logoIconVault
Sign in

Light-Dark() Playground - Free Online Design Tool | IconVault

Build theme tokens with CSS light-dark() and preview light and dark mode live. Free, in your browser.

All tools

Light-Dark() Playground

Theme tokens with light-dark() and live preview

5 of 5 free uses left

Theme tokens

--bg

Background lightdark

--surface

Surface lightdark

--text

Text lightdark

--muted

Muted text lightdark

--border

Border lightdark

--primary

Primary lightdark

--on-primary

On primary lightdark

light-dark() picks the first color in light mode and the second in dark mode, driven by color-scheme. No JavaScript theme toggling needed.

Live preview

Preview card

Ship dark mode in one line

Every token below reads from the same light-dark() values you set on the left. Flip the toggle to see the whole card re-theme instantly.

Surface panel with a border token.

Generated CSS

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #0f172a);
  --surface: light-dark(#f1f5f9, #1e293b);
  --text: light-dark(#0f172a, #f8fafc);
  --muted: light-dark(#64748b, #94a3b8);
  --border: light-dark(#e2e8f0, #334155);
  --primary: light-dark(#0d9488, #2dd4bf);
  --on-primary: light-dark(#ffffff, #042f2e);
}

/* usage */
.card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

About this tool

IconVault's Light-Dark() Playground makes dark mode trivial. Define theme tokens like background, surface, text and primary with a light and a dark value each, and the tool generates CSS custom properties using the native light-dark() function. Flip the live preview between light and dark to watch the whole UI re-theme instantly. Completely free and runs fully in your browser.

No JavaScript theme toggling, no duplicated stylesheets: `light-dark()` picks the right value from your color-scheme, and one declaration covers both modes. Copy the generated `:root` block straight into your project.

Frequently asked questions

Popular searches

light-dark()light dark csscss light-darklight-dark playgrounddark mode csscss dark mode tokenstheme tokens csscolor-scheme csscss custom properties themedark mode without javascriptnative css dark modelight-dark browser supportlight-dark examplelight-dark tutorialcss theme switcherdark mode design tokenslight dark mode websitecss variables dark modeprefers-color-schemecolor scheme light darktheming with css variablesdesign tokens generatordark mode palette generatorui theme builderwebsite theme generatorlight mode dark mode togglecss color schemedark mode best practicesaccessible dark modedark mode contrasttheme token namingsemantic color tokenssurface token designdark mode background colordark mode text colorcss @media prefers-color-schemelight-dark vs media querymodern css themingcss nesting themetailwind dark modetailwind light-darkdesign system themingdark mode ui kittheme preview tooltest dark modedark mode mockupcss color functionsrelative colors dark modeoklch dark modefree theming tooliconvault theme

More tools

Font Pairing

Curated heading and body font pairs with live preview

Font Preview

Preview 200+ Google Fonts with your own text

Glassmorphism Generator

Design frosted glass cards and copy the CSS

Gradient Text

Gradient headlines with live preview and CSS

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →