Free CSS Light Dark Generator
Generate theme-aware colors with our free tool. CSS light-dark() function for dark mode.
- Light/dark color pairs
- Live theme toggle
- color-scheme integration
- Variable combinations
- Browser support info
Frequently Asked Questions
What is light-dark()?
light-dark(lightColor, darkColor) returns the first color in light mode and the second in dark mode. It requires color-scheme to be set on the element.
How is this different from prefers-color-scheme?
prefers-color-scheme requires media queries. light-dark() is a color function—use it inline in any color property. It's more concise for simple theme switching.
Do I need color-scheme?
Yes, set 'color-scheme: light dark' on :root for light-dark() to work. This also enables native dark mode for form controls and scrollbars.