🎨 Color Configuration
📋 Color Presets
👁 Live Preview
Preview Text Effect
This is preview text showing the light-dark() color function effect. Toggle between light/dark mode to see the change.
📝 Generated Code
📖 About CSS light-dark() Function
The CSS light-dark() function is part of the CSS Color Level 5 specification. It allows specifying different color values for light and dark modes within a single CSS declaration, eliminating the need for @media (prefers-color-scheme) media queries.
Syntax
property: light-dark(<light-color>, <dark-color>)
Key Benefits
- Concise: Single line replaces entire media query blocks, significantly reducing CSS code
- Auto-switching: Automatically follows system or user theme settings
- Flexible: Supports any CSS color format (hex, rgb, hsl, named, etc.)
- Performance: Native browser support, no flash during switching
Prerequisite
Set color-scheme: light dark; on the root element for light-dark() to work correctly:
:root {
color-scheme: light dark;
}
Browser Support
Chrome 123+, Firefox 120+, Safari 17.5+. Global support approximately 75%+. Provide fallback values for unsupported browsers.
❓ FAQ
What is the CSS light-dark() function?
light-dark() is a CSS Color Level 5 color function that takes two color values as parameters. It uses the first color in light mode and the second in dark mode. It automatically switches based on the color-scheme property without media queries.
How is light-dark() different from prefers-color-scheme?
prefers-color-scheme is a media query requiring two separate CSS rules. light-dark() is a single inline function, making code more concise. light-dark() depends on the element's color-scheme property, while prefers-color-scheme depends on user system preferences.
What is browser compatibility?
light-dark() is supported in Chrome 123+, Firefox 120+, Safari 17.5+. Unsupported browsers will ignore the property, so providing fallback color values is recommended. Current global support is approximately 75% and growing.
How to set color-scheme?
Set color-scheme: light dark; on the :root or html element to support both light and dark modes. You can also set only light or dark to fix the mode. This is a prerequisite for the light-dark() function to work.
Is my data safe?
Completely safe. All color processing happens locally in your browser. No data is sent to any server, and no information is stored. Data is automatically cleared when you close the page.