light-dark()
developer.mozilla.orgNo 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" />
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.
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.
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...
That's what I was getting at, thanks for the reference!
There is already a media query for contrast preferences (increased or decreased) IIRC
I think `black` and `white` should be switched here:
color: light-dark(black, white);
I don't think so. You want black text on a light theme/background.
Sorry, I misread your answer. You're right. I automatically assumed setting some background color for which `color: light-dark(white, black);` would be right.
But why is the order switched below?
Functional notation: light-dark(light-color, dark-color)
It's not.. `light-color` refers to the colour you want presented if the user's preference is for a "light" theme.
It's not declaring the relative brightness of the two colours - I agree it could be documented a little less ambiguously with something like `light-theme-color`.
I got confused because I thought it would set a background color. For text it's inverted and hence correct.
It sets the foreground/text color because it's used with the `color` property (https://developer.mozilla.org/en-US/docs/Web/CSS/color). You can use it to set the background color too in which case you'd do `background-color: light-dark(white, black);`