from Hacker News

light-dark()

by clairity on 11/29/23, 3:19 PM with 12 comments

• by 6510 on 11/30/23, 7:32 AM

  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.

• by cantSpellSober on 11/30/23, 1:33 PM

  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.

• by davidkunz on 11/30/23, 5:18 AM

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

  color: light-dark(black, white);