light-dark()

[6510]

No offense but how about bothering to finish Alternative Style Sheet selection?

   <link href="css.css" rel="stylesheet" title="Default Style" />
   <link href="a.css" rel="alternate stylesheet" title="light" />
   <link href="b.css" rel="alternate stylesheet" title="dark" />

Or is this not precisely the same thing?

https://html.spec.whatwg.org/multipage/links.html#rel-altern...

edit: with finish I mean use this for light/dark mode and fix it so that the preference chosen by the user is not immediately discarded after navigation. One doesn't discard user selected preferences. It is not done.

[cantSpellSober]

What if, in the future, we have more than two options (light and dark)?

@media (prefers-color-scheme: [name]) seems more extensible, but this feels simpler and easier to read.

Glad the function accepts custom properties (CSS "variables").

Should probably add a color property that doesn't use this function as a fallback for browsers that don't support it.

[romellem]

prefers-color-scheme only [accepts two values][0] at the moment: light and dark. However, they acknowledge this may not be fixed to this enum forever

> The values for this feature might be expanded in the future (to express a more active preference for light color schemes, or preferences for other types of color schemes like "sepia"). As such, the most future-friendly way to use this media feature is by negation such as (prefers-color-scheme: dark) and (not (prefers-color-scheme: dark)), which ensures that new values fall into at least one of the styling blocks.

[0]: https://drafts.csswg.org/mediaqueries-5/#prefers-color-schem...

[Kiuhrly1]

There is already a media query for contrast preferences (increased or decreased) IIRC

[davidkunz]

I think `black` and `white` should be switched here:

color: light-dark(black, white);

[8n4vidtmkvmk]

I don't think so. You want black text on a light theme/background.