light-dark limitations

While building a new site which will support both light and dark mode, I came across this bug. It’s not new, it’s just that so many parts the color-scheme api are well thought out and working as expected, that even MDN lists the Baseline as “widely available since February 2022”!

Screenshot of MDN Baseline Compatibility Banner:
Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2022.
Safari is highlighted and a "Thinking" emoji is overlaid.

The bug only affects Safari, where SVG images are embedded. The curious part is that safari can detect prefers-color-scheme: light, so even crafting SVG icons to default to dark mode won’t work.

Here is a test case I crafted to illustrate the issue (forked from the original).

https://codesandbox.io/p/devbox/svg-prefers-color-scheme-media-query-test-forked-zmdqft

Discourse

When folks talk about Safari being the Internet Explorer of Today, it is both for its sluggish pace of adopting basic web rendering standards, but especially because of it’s market dominance.


Comments

One response to “light-dark limitations”

  1. @dev It’s also because apple profits 30% from App Store, and a robust Safari (all iOS browsers are truly Webkit) means robust webapps.

    Apple has all the incentives to keep safari an autdated shitshow. Make it better and they lose *a lot* of money.

Leave a Reply

Your email address will not be published. Required fields are marked *