Re: [csswg-drafts] [css-color-adjust] Allow authors do define custom `color-scheme` values. (#9660)

> ([#](https://github.com/w3c/csswg-drafts/issues/9660#issuecomment-1839357671)) Not sure if this is what Bramus had in mind lol.

Originally I thought of only defining custom `color-scheme` values and then being able to respond to that [^1], as also shown in your example:

```css
@color-scheme --ancestry, --arc, --arc-grey;

:root {
  --color-link: schemed-value(
    --ancestry yellow,
    --arc red,
    --arc-grey lime
  )
}

a { color: var(--color-link) }
```

_(Ideally your example should also include `light` and `dark`)_

This feels like a good approach to pull some one-offs, but that is to be discussed in #7561.

---

What Luke and Tab are suggesting[^2] [^3], is to use a `@color-scheme` where authors can define their values for the system colors, with the ability to extend from an already existing scheme (via the `base` descriptor).

I hadn’t originally considered this, but this also makes sense, as it makes things a lot easier. With only these system colors, you can already change the entire site’s appearance.

---

I don’t think these should exclude each other. Combined, I see authors use it like this:

```css
/* Define --solarized-dark custom color-scheme, based on dark */
@color-scheme --solarized-dark {
  base-scheme: dark;
  CanvasColor: …;
  …
}

/* This page supports all of these color-scheme values */
html {
  color-scheme: --solarized-dark light dark;
}

/* Light Mode colors */
:root {
  --link-color: blue;
}
/* Dark Mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    --link-color: pink;
  }
}
/* Custom --solarized-dark colors */
@media (prefers-color-scheme: --solarized-dark) {
  :root {
    --link-color: yellow;
  }
}

/* Ideal usage: use the custom prop that already responds to the chosen color-scheme */
a {
  color: var(--link-color);
}

/* Use schemed-value() for one-offs, i.e. for values that are not stored in a custom property that respond to color-scheme */
a.special {
  text-decoration-color: schemed-value(--solarized-dark red, light pink, dark lime);
}
```

[^1]: https://github.com/w3c/csswg-drafts/issues/9660#issuecomment-1833875432
[^2]: https://github.com/w3c/csswg-drafts/issues/9660#issuecomment-1833903340
[^3]: https://github.com/w3c/csswg-drafts/issues/9660#issuecomment-1834713634

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


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

Received on Tuesday, 5 December 2023 00:47:30 UTC