CSS light-dark() Generator
Generate CSS light-dark() color pairs for automatic light and dark mode switching. Live preview, color-scheme setup, and copy-ready CSS. 100% client-side.
Loading tool...
What is CSS light-dark() Generator?
The CSS light-dark() Generator builds adaptive color pairs using the CSS light-dark() function, which returns a different color in light and dark mode automatically. When you declare color-scheme: light dark, the browser resolves light-dark(lightColor, darkColor) to the first value in light mode and the second in dark mode — no media queries, no JavaScript, no duplicated rules. This tool gives you dual color pickers, a live side-by-side preview, and three copy-ready outputs: the raw value, a single CSS rule, and a full snippet with the color-scheme declaration.
Key Benefits
- Automatic light/dark switching with a single CSS function — no media queries
- Live side-by-side preview of both themes rendered with the real value
- Built-in CSS property selector plus support for custom properties
- Generates the required color-scheme: light dark declaration for you
- 100% client-side - works offline and keeps colors private
Common Use Cases
- •Defining brand colors that adapt to user theme without prefers-color-scheme rules
- •Setting text, background, and border colors that work in both light and dark mode
- •Migrating a media-query-based dark theme to the simpler light-dark() approach
- •Prototyping adaptive color palettes for design systems
How to Generate a CSS light-dark()
- Pick the light-mode color: Use the native color picker or type a hex value (#ffffff) for the color shown in light mode. Invalid hex falls back to white.
- Pick the dark-mode color: Choose the color shown in dark mode the same way (e.g. #1a1a1a). The two values become the arguments to light-dark().
- Choose a CSS property: Select which property the value applies to — color, background-color, border-color, or a custom property — from the dropdown.
- Copy the CSS: Click Copy on the value, the rule, or the full snippet (which includes the required color-scheme: light dark declaration) and paste into your stylesheet.
Key Features
- Dual color pickers with manual hex entry for light-mode and dark-mode colors.
- Live side-by-side preview of both themes rendered with the real light-dark() value.
- Built-in CSS property selector (color, background-color, border-color, and more).
- Generates the required color-scheme: light dark declaration automatically.
- One-click copy for the light-dark() value, the CSS rule, and the full snippet.