This is preview text showing the light-dark() color function effect. Toggle between light/dark mode to see the change.
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.
property: light-dark(<light-color>, <dark-color>)
Set color-scheme: light dark; on the root element for light-dark() to work correctly:
:root {
color-scheme: light dark;
}
Chrome 123+, Firefox 120+, Safari 17.5+. Global support approximately 75%+. Provide fallback values for unsupported browsers.
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.
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.
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.
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.
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.