light-dark()

Syntax

light-dark(light-color, dark-color)

Parameters

Examples

color: light-dark(#1a1a1a, #f5f5f5);

:root { color-scheme: light dark; }
body { background: light-dark(white, #121212); }

color: light-dark(oklch(0.3 0.1 250), oklch(0.9 0.05 250));

Browser Support

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

Tailwind uses dark: variant instead: text-gray-900 dark:text-gray-100

Related Functions

• oklch()— The oklch() function defines colors in the OKLCH color space using lightness, chroma, and hue.
• lch()— The lch() function specifies colors using CIE Lightness, Chroma, and Hue, offering a perceptually uniform color space.
• lab()— The lab() function defines colors in the CIE LAB color space using lightness and two chromaticity axes.
• oklab()— The oklab() function defines colors in the Oklab perceptual color space using lightness and two chromaticity axes.
• rgb()— The rgb() function defines colors using Red, Green, and Blue channel values. Modern syntax also accepts an optional alpha parameter.
• hsl()— The hsl() function defines colors using Hue, Saturation, and Lightness, providing an intuitive cylindrical color model.

Frequently Asked Questions