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

JoshTumath has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-conditional][selectors] A way to set styles according to the used color scheme ==
## Problem

We can use `@media (prefers-color-scheme)` to set styles according to the user's preferred colour scheme. We can use the `light-dark()` colour function to set a colour value according to the [_used colour scheme_](https://drafts.csswg.org/css-color-adjust-1/#used-color-scheme). However, there is no way to set an entire rule of styles depending on the _used colour scheme_.

The author can use `<meta name="color-scheme">` and the `color-scheme` property to change the used colour scheme. As discussed in #10249, it is desirable for the author to be able to force the colour scheme to `only dark` or `only light` on certain pages of their website or certain portions of their page.

<details>
<summary>Examples of why an author would do that</summary>

* A page that play video content may use a dark colour scheme to make the video stand out better
* Pages for young children may use a light colour scheme, because user research shows young children have a worse experience on a dark colour scheme
* A portion of a page uses
* A WYSIWYG editor for content that appears in a dark colour scheme would need to present that content in the editor in a dark colour scheme as well
</details>

@tabatkins made the argument in #10249 that the fact that `@media (prefers-color-scheme)` doesn't use the _used colour scheme_ may be confusing to authors, or may even make the media query pointless for them.

So authors need a way to set styles for an element according to the _used colour scheme_.

## Possible solutions

In #10249, there were two ideas for how it could be done.

### 1. A new type of container query

Probably would be called `color-scheme()`.

```css
.header {
  background-image: url("light-bg.avif");

  @container color-scheme(dark) {
    background-image: url("dark-bg.avif");
  }
}
```

We could just use a style query for the `color-scheme` property, but that won't get the true _used colour scheme_ (i.e. it won't know if it has been set by `<meta name="color-scheme">`.)

### 2. A new pseudo-class

Probably would be called `:color-scheme()`.

```css
.header {
  background-image: url("light-bg.avif");

  &:color-scheme(dark) {
    background-image: url("dark-bg.avif");
  }
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12681 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 11:51:41 UTC