Friday, May 10, 2019

Dark Mode Support in WebKit

Timothy Hatcher:

With the Safari 12.1 update in macOS 10.14.4, dark mode support in WebKit has arrived.

[…]

Not all web content is simple. For this reason Safari and WebKit do not auto-darken web content — documents will need to opt-in to dark mode. The main way to signal that your content supports dark mode it to adopt the new color-scheme style property, specified in this proposal.

[…]

Defining color-scheme will get you going for simple content. For most web content, you will need to adopt the prefers-color-scheme media query, specified in this proposal, to style elements with custom colors or images. You can use this media query anywhere media queries are supported, such as in <picture> elements or window.matchMedia() for script triggers.

The best way to deploy a dark and light color scheme in your documents is to utilize CSS variables. Then you can easily specify the colors in one place with the media query, and use those variables throughout your stylesheets. When the media query matches, the variables will change wherever they are used — auto switching with any appearance change.

Safari’s Web Inspector now lets you test dark mode without having to switch the entire system.

Steven Sinofsky:

All the energy going into “dark mode” in every app AND every OS while each attempt yields more, not fewer, bugs…feels like just about everyone could prioritize differently.

There I said it.

Ken Kocienda:

I agree with @stevesi. “Dark mode” isn’t bad in any deep sense, and some people like using it, but the effort to implement it everywhere will not yield benefits in line with the cost. It’s a sideways move. It’s industry-wide bike-shedding.

Howard Oakley:

So when you print a window which the user can see, AppKit lets it get printed in Dark Mode if that is in use. That’s not at all helpful, is it?

The answer is to print from a separate off-screen view, which you can set to Light Mode.

Previously:

Update (2019-05-13): Nikita Vasilyev:

Dark Mode in Web Inspector was introduced in Safari Technology Preview last year. This article highlights implementation details which could be helpful for anyone adapting Dark Mode for their websites or web views.

Comments RSS · Twitter

Leave a Comment