5 ms·

light-dark()

• davidkunz 3y ago
  I think `black` and `white` should be switched here: color: light-dark(black, white);
  • 8n4vidtmkvmk 3y ago
    I don't think so. You want black text on a light theme/background.
    • davidkunz 3y ago
      But why is the order switched below? Functional notation: light-dark(light-color, dark-color)
      • whiskers 3y ago
        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`.
        • davidkunz 3y ago
          I got confused because I thought it would set a background color. For text it's inverted and hence correct.
          • erhaetherth 3y ago
            It sets the foreground/text color because it's used with the `color` property (https://developer.mozilla.org/en-US/docs/Web/CSS/color 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);`
    • davidkunz 3y ago
      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.
• 6510 3y ago
  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-alternate 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 3y ago
  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 3y ago
    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-scheme https://drafts.csswg.org/mediaqueries-5/#prefers-color-schem...
    • cantSpellSober 3y ago
      That's what I was getting at, thanks for the reference!
  • Kiuhrly1 3y ago
    There is already a media query for contrast preferences (increased or decreased) IIRC