"If you don't know, the light-dark() function takes two color arguments: one for light mode and one for dark mode. Hence, the name light-dark(). It toggles between the two light and dark values based on a user's preferences. Sara Joy has a wonderful article where you can get a much more detailed explanation. The key thing is that the function requires you to use the color-scheme property to activate those two color modes: :root { color-scheme: light dark; } .element { color: light-dark(brown, black); }"
"Just saw this from @bramus 's post, and I suspect that things are already closed / there's no changing things now, but I see this as an approach that doesn't actually solve for the issues people are facing with theming, and does so in a way that will create a trap for them when pursuing proper theming support. [...] We shouldn't ship single-purpose tools for the browser, but rather ones that scale and we can build upon."
The light-dark() CSS function accepts two color arguments, one for light mode and one for dark mode, and selects between them according to a user's preference. The function requires the color-scheme property to activate the light and dark color modes, for example :root { color-scheme: light dark; } .element { color: light-dark(brown, black); }. The current design supports only two modes, which limits support for other user-preferred schemes like grayscale, high contrast, and low contrast. The function originated from a proposal around 2022 and was added to the specifications. Critics warned that single-purpose tooling can create traps for proper theming and urged scalable, extensible solutions.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]