CSS light-dark function

Now you can define different colors for light and dark themes directly in CSS. No more checking for color preferences in JavaScript! Discover the power of the CSS light-dark function for effortlessly switching color schemes.

Resources:

#ChromeForDevelopers #Chrome

Products Mentioned: Baseline, Baseline APIs, Chrome

[pokefreak]

also this hierarchy just doesn't make sense. You're selecting a specific element to style and then saying how a specific property on that element should change under a certain condition (element selector > style attribute > media-query > style value)
when generally you want to define a component and then define how it should look in different contexts (element selector > media query > styles)

[feldinho]

Can we have a prefers-color-scheme override on the browser already? Since custom switchers don't change prefers-color-scheme, this function and media queries are useless after the user use a custom switcher.

[ShortFilmVD]

Now I just need to find a script to rewrite my existing css files 😂

[hemantagrawal]

And how will user enable dark/light mode or is it based on device theme?

[pokefreak]

if you wanna add pattern matching to CSS just add a proper match statement, not this feature specific half-baked solution.
background-color: match(prefers-color-scheme) {
light: white;
dark: black;
}
padding: match(device-width) {
< 600px: 0.5rem;
>= 600px: 1rem;
}
and then you just add functions/macros for common cases like light-dark.
there, made a better spec in 5 minutes.