God forbid someone adds practical features for common use cases to our beautiful turing tarpit.

You can have both. But good tool design looks at the horizon, not just at your feet.

You could deliver the same convenience in a way that’s set up to be repurposable (fullcolor /rgcolorblind) or extensible (light / grey / dark / …n) with as little difference as choosing a more mindful name.

I agree with the previous comment that the current approach lacks flexibility in achieving high contrast. It might be beneficial to consider a more general and adaptable method that can accommodate different styles or even introduce primitives for different styles in the future

I agree.

You can already do this using the space toggle technique:

:root { --dark: ; }

@media (prefers-color-scheme: dark) { --light: ; --dark:initial; }

.example { color: var(--light, #000) var(--dark, #fff); }

Ah yes, the CSS Space Toggle. The way this works internally is a seemingly-unintended but very useful aspect of the CSS specification.

That looks awful, but presumably if you are using sass instead of css you could define a light-dark macro already which does exactly that.

I wonder if custom functions might ever make their way to css.

Correction, the media query should have been:

@media (prefers-color-scheme: dark) { :root { --light: ; --dark:initial; } }

Missed the selector.

(Hi, author of the post/article here)

Yes, `light-dark()` is very specific in what it can do … but it’s not the end goal. The end goal is to have a generic function – something like `schemed-value()` – that can respond to a plentitude of `color-scheme` values and return more than just `<color>` values.

Reality is, though, that browsers don’t have support for custom `color-scheme` values (it’s explicitly forbidden in the spec, for now) [^1] and that CSS parsers need to know ahead of time what they are about to parse [^2].

By narrowing things down in feature scope, you can use this convenience method now, instead of needing to wait a few months/years until the rest is figured out.

Once `schemed-value()` becomes a thing, `light-dark()` can become syntactic sugar for it:

``` light-dark(<color>, <color>); = schemed-value(light <color>, dark <color>); ```

[^1]: https://drafts.csswg.org/css-color-adjust/#color-scheme-prop... [^2]: https://www.w3.org/TR/css-syntax-3/#parse-grammar