๐
CSS light-dark() Function Explorer
Explore the CSS light-dark() function. Define light and dark color pairs to create responsive theming with a single CSS value.
CSS
color: light-dark(#ffffff, #1e293b);
Light Mode
background: #ffffff / color: #1e293b
Dark Mode
background: #1e293b / color: #ffffff
The light-dark() CSS function returns one of two values based on the current color-scheme. Requires color-scheme: light dark; on the element.
Related Tools
๐จ
Background Pattern Generator
CSS / Styles
15.6k
๐๏ธ
CSS Backdrop Filter Preview
Preview & Live Render
12.8k
โ๏ธ
Clip Path Generator
CSS / Styles
12.5k
๐จ๏ธ
CMYK โ RGB Converter
Color Tools
11.8k
๐ท๏ธ
Badge Generator
CSS / Styles
11.0k
๐ฒ
Box Shadow Generator
CSS / Styles
10.5k
๐ผ
Color Palette to ASE Swatch
Color Tools
10.0k
๐๏ธ
CSS Color Contrast Ratio Visualizer
Accessibility
10.0k
๐ฏ
CSS Selector Tester
CSS / Styles
10.0k
๐
Analogous Color Generator
Color Tools
10.0k
๐จ
Color Compare Tool
Color Tools
10.0k
๐จ
CSS Color Function Converter
Color Tools
10.0k
๐ป
Color Palette Theme for VS Code
Code Tools
10.0k
๐
CSS Columns Tester
Math & Calculation
10.0k
๐จ
CSS Validator
CSS / Styles
10.0k
๐ง
CSS Gradient Preview
Preview & Live Render
10.0k