Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

light-dark()

developer.mozilla.org

Post reply on HN
Print view View original

11–13 of 13 posts

Re: light-dark()

#11

Post by erhaetherth »

davidkunz wrote: post #9
whiskers wrote: post #5

Earlier quoted context omitted.

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);`

Re: light-dark()

#12

Post by cantSpellSober »

romellem wrote: post #10
cantSpellSober wrote: post #7

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 su…

That's what I was getting at, thanks for the reference!

Re: light-dark()

#13

Post by Kiuhrly1 »

cantSpellSober wrote: post #7

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.

There is already a media query for contrast preferences (increased or decreased) IIRC
Post reply on HN