Dark Mode Support in WebKit
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-schemestyle property, specified in this proposal.[…]
Defining
color-schemewill get you going for simple content. For most web content, you will need to adopt theprefers-color-schememedia 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 orwindow.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.
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.
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.
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:
- iOS 13 Rumor Roundup
- New WebKit Features in Safari 12.1
- Safari Technology Preview Adds Dark Mode CSS
- Supporting Dark Mode
- Updates for Mojave
- Dark Side of the Mac: Appearance & Materials
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.
