-
Notifications
You must be signed in to change notification settings - Fork 756
Description
The existing light-dark() function gives a very easy way to select different colors based on the used color scheme on an element. In #10577 we're discussing adding an if() test to generalize that, so you can vary any value based on the used color scheme (for example, font-weight: if(color-scheme(dark): bold, else: normal);). This is a little more verbose, but it's a rarer use-case, so that's all right.
In #10577 (comment), Emilio suggests that varying CSS images based on color scheme is a common enough use-case to be worth addressing as simply as colors. (Several other people have argued this as well in similar issues.) I agree; any background image I apply in a light-mode stylesheet almost certainly has to be changed in a dark mode stylesheet.
I see two possible ways to do this:
- Just extend the grammar of
light-dark(), tolight-dark( <color>#{2} | <image>#{2} ). If you supply two colors, it returns a color; if you supply two images, it returns an image. - Add a
light-dark-image( <image>#{2} )function, which is identical tolight-dark()but always returns an image, instead of always returning a color.
I don't have a strong opinion in this regard. Folding them both together into a single function like in (1) is convenient, but starts implying that it might cover even more types, and we don't want to suggest that. Duplicating the functionality with a similarly-named function like in (2) is simple, but also a little bit more verbose.