css: the light-dark function

2024-09-25 00:50

edit: you do need to set the color-scheme css property. per mdn:

To enable support for the light-dark() color function, the color-scheme must have a value of light dark, usually set on the :root pseudo-class.

exactly what it says on the tin, the most perfect example of a well-designed CSS function.

here is the source code:

<div style="border: 1px solid light-dark(#00f, #f00); border-radius: 1rem; padding: 1rem;">
  if you are viewing this in dark mode you are seeing red. if you are viewing this in light mode you are seeing blue.
</div>

here is the result: