Safari Just Made Browser-Controlled Dark Mode Real
Browsers are beginning to take responsibility for how websites look in dark mode, even when the websites themselves haven’t implemented it.
On November 3, WebKit announced Adaptive Dark Mode in Safari 27.3 beta. When a user enables it, Safari can analyse a predominantly light website and transform it into a dark appearance. It adjusts backgrounds, text, gradients and certain graphics while trying to preserve usability and contrast.
It’s kind of similar to Chrome’s auto dark mode origin trial, which I talked about a few years ago in this article.
Anyway, the way Safari’s Adaptive Dark Mode implementation works is, first, Safari estimates whether a page is predominantly light or dark. It then transforms the colours of the element, attempting to preserve hue while inverting luminosity. It knows when to invert colors so elements remain visible or when to leave colors unchanged.
When it comes to updating the text color, it targets a 4.5:1 text contrast ratio so that there will be sufficient contrast.
It can transform SVG colours and some simple monochrome bitmap logos. It doesn’t touch content images and canvas content while doing so. Some effects, such as masks and mix-blend-mode, may be disabled where they cause problems.
The Adaptive Dark Mode intertwines all these in such a way that the content looks good and stays usable.
If you don’t want Safari to handle dark mode for your website, you can do that as well. For this, you can declare the color-scheme of your website like so.
<meta name="color-scheme" content="light dark">
This will tell Safari that the website supports both schemes (even if the website doesn’t support a dark mode in actuality). It’s a signal for Safari not to manipulate the color scheme on its own.
All in all, I think this is a good addition to Safari. Not everyone wants to wait for websites to implement dark mode, and having the browser take care of it is a reasonable way to bridge that gap.
What’s interesting here is how browsers are gradually taking more responsibility for adapting websites to user preferences. We’ve seen this with features like reader modes, automatic text adjustments, and now browser-controlled dark mode.
For us developers, this is another reminder that we don’t always have complete control over how our websites are presented. And perhaps that’s not necessarily a bad thing. After all, the ultimate goal isn’t to preserve every pixel exactly as we designed it, but to make the content comfortable and accessible to the people reading it.
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
