Chris Lilley ๐ด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟCSS has just added an image form of light-dark(). So as well as choosing between a pair of colors based on light or dark mode, you can also choose between a pair of images.
No you can't mix them because parsing would be hard.
#CSS
Christopher Kirk-Nielsen@svgeesus Great to see more progress on this feature.
Does this only include `url()` images or could we use gradients? I don't have a use-case in mind, but I could imagine a two-stop gradient in light mode, and three-stop gradient in dark mode, for example, where inlining `light-dark()` for each colour stop wouldn't work.
@chriskirknielsen Any <image>.
The corresponding edit to CSS Images 4 has not yet been made, but will be soon.
@svgeesus Neat! Thanks for the clarification.
@chriskirknielsen It will get added here:
Sara Joy 
@chriskirknielsen @svgeesus ooooh this is exciting!
As far as I know it, the things that can react to color-scheme currently are:
- light-dark() (soon with images, ace!)
- default html "theme"
- system colors, especially CanvasText/Canvas (in chrome the others are a bit broken)
...is that it? I've heard of the coming of color-scheme() to be used in container queries and if().
@sarajw @chriskirknielsen It was explained by @bramus how to make a custom light-dark function:
@svgeesus @chriskirknielsen @bramus yes got that in my list too, just wondering if there's any other syntax or upcoming changes that have passed me by.. :)
Roma Komarov@sarajw @svgeesus @chriskirknielsen @bramus Just in case you missed it: https://blog.kizu.dev/querying-the-color-scheme/#single-source-of-truth โ similar to what Bramus wrote about, but without custom functions/if, so usable in all browsers that support container style queries today via assigning a `light-dark()` to a registered custom property, allowing anything to react to it (but on a container level, not on an element level, which `if()` will help with)
Querying the Color Scheme
Media queries are nice, but for many things, we donโt even need them: there is this great CSS property `color-scheme`, which allows us to make various things adapt to the current color scheme. We can even set it on a per-element basis. This post describes how we can use registered custom properties and style queries to read the current value of a `light-dark()` color for styling any non-color properties as well.
@kizu ooh yes thank you!
Full browser support for style queries is still lagging behind, I guess? That captured colour scheme is nice, though.
@sarajw @svgeesus @chriskirknielsen @bramus Still not released in Firefox, but Nightly version already have them (although, still buggy in a few places, but my technique works (with one tiny fix that I just pushed))
Jon@sarajw @kizu I'm assuming I could have a UI control that sets user theme preference outside of the system preference (.dark on root etc.)
And have my CSS contain:
```
:root { color-theme: light dark }
.light { color-theme: light }
.dark { color-theme: dark }
```
Which I believe would work fine today with light-dark() use? But the future will include being able to switch background images and other properties too.
I still need to figure the nicest way to swap regular <img> based on theme.