In working on my Tyfy framework, I've rediscovered the color-scheme property in CSS. I wrote about this back in April of ’24. I was frustrated that this very useful feature could not be used for developing dark mode in my custom Drupal themes because Safari didn't support the property – and was actively breaking the stylesheet if you tried to use it instead of simply ignoring it.

Happy to say that it now works. This makes me giddy. I can remove duplicate color declarations for dark mode colors – and stop using prefers-color-scheme media queries – and write color definitions like this:

:root {
  --bg-color: light-dark(white, black);
}

🤩🤩🤩

In addition to the color-scheme goodness, I learned about another color property today: accent-color. This property affects the color applied to checkboxes, radio buttons, range sliders, and <progress> elements. I have yet to try it but I see on MDN that this property does not fully work with Safari.

Go figure.