Re: [csswg-drafts] [css-conditional][selectors] A way to set styles according to the used color scheme (#12681)

> The pseudo class would trivially create cycles I think?
> 
> From [@bramus](https://github.com/bramus) on Bsky:
> 
> :color-scheme(dark) {
>   color-scheme: light;
> }

Ah yes of course. Then that rules out a pseudo-class.

> Alternatively/additionally if we could make light-dark() work for non colours that would solve basically all my use cases.

That could be interesting! But I guess the `if()` function would achieve the same thing, if we resolve to adopt the `color-scheme()` query.

> > To be able to match the used color-scheme on the page we would probably need a media feature for used-color-scheme. Pseudo-classes and container-queries can not solve this use-case.
> 
> There's previously been discussions about replacing the media attribute with some sort of "condition" one, if that allowed style queries I think a new style query would also solve that case?

Do you have a link to where that's been discussed, @lukewarlow?

@johannesodland I don't think the solution for the `<picture>` source problem is that simple, because the HTML parser tries to fetch the image before CSS is parsed. So it wouldn't be possible to work out the _used colour scheme_ before the browser selects the picture source to fetch. However, if you're using `loading=lazy`, then - just like how we can use `sizes="auto"` on the `img` element - maybe the used colour scheme could be determined in a similar way?

I recommend you make a new issue for it on the [whatwg/html](https://github.com/whatwg/html/) repo.

> Would a container query prevent using this on the `<html>` element? It is very common to declare `background-color` and color-related custom properties on `<html>`.

Yes. But would you need to use it there, or would the media query be enough? Or could you apply the styles on the `body` element instead?

-- 
GitHub Notification of comment by JoshTumath
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12681#issuecomment-3237110213 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 29 August 2025 13:49:30 UTC