2024/02/14

A more concise way to implement light/dark modes:

:root {
  color-scheme: light dark;
}

which saves a few more bytes than my usual

:root {
  --fg: #000;
  --bg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #fff;
    --bg: #000;
  }
}

– https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#declaring_color_scheme_preferences

I also learned that CSS has special syntax for systmem-provided colors, notably:

• Canvas: the default background color
• CanvasText: the default text color

– https://developer.mozilla.org/en-US/docs/Web/CSS/system-color#syntax