Skip to content

[css-images-4] Add light-dark-image(), or generalize light-dark() for images too? #12513

@tabatkins

Description

@tabatkins

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:

  1. Just extend the grammar of light-dark(), to light-dark( <color>#{2} | <image>#{2} ). If you supply two colors, it returns a color; if you supply two images, it returns an image.
  2. Add a light-dark-image( <image>#{2} ) function, which is identical to light-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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions