Dark mode is now everywhere, including in iOS 13 and Android 10. Web browsers like Chrome, Firefox, Safari, and Edge have embraced dark mode, too. Now, browsers are bringing automatic dark mode to websites thanks to a feature called prefers-color-scheme.
网站现在可以像应用程序一样检测暗模式 (Websites Can Now Detect Dark Mode Like Apps Can)
Some sites offer dark modes today. For example, you can enable dark mode on YouTube, Twitter, or Slack in a few clicks. That’s pretty cool, but who wants to enable this option separately each time they visit a new website?
When you enable dark mode on Windows 10, macOS, iOS, or Android, the applications you use all know you’ve enabled dark mode and can automatically enable it. Google Chrome doesn’t even have an easy-to-access dark mode option. Chrome just automatically adjusts itself based on your overall operating system choice.
在Windows 10,macOS,iOS或Android上启用暗模式时,所有使用的应用程序都知道您已启用暗模式,并且可以自动启用它。 Google Chrome甚至没有易于访问的深色模式选项 。 Chrome会根据您选择的整体操作系统自动进行自我调整。
In the past, there wasn’t a way for websites to automatically implement dark mode. Even if your browser’s interface goes dark, websites will continue using their bright backgrounds. You have to manually enable dark mode or use a browser extension that forces dark mode.
It wasn’t web developers’ faults—they had no way of detecting whether dark mode was enabled on your device. That’s changed with a new cascading style sheets (CSS) feature websites can take advantage of.
The answer to this problem is prefers-color-scheme, a CSS feature that websites can use to ask your web browser whether you have dark mode enabled. A web page can use a different theme depending on whether you have dark mode enabled or disabled.
Safari for iPhone and iPad gets it with Safari 13 as part of iOS 13 on September 19. 适用于iPhone和iPad的Safari将于9月19日与Safari 13一起作为iOS 13的一部分提供。
Mozilla Firefox has supported it since Firefox 67, released on May 21. 自5月21日发布Firefox 67以来,Mozilla Firefox就一直支持它。
Safari for Mac has supported it since Safari 12.1, released on April 5. 自4月5日发布Safari 12.1以来,Mac版Safari就支持它。
Microsoft Edge doesn’t support it, but the new Chromium-based Edge browser will. Microsoft Edge不支持它,但是新的基于Chromium的Edge浏览器将支持。
This isn’t an option you select in your browser itself. Just choose between light and dark modes in your operating system, your browser will obey the change, and websites can follow along and automatically enable dark mode if they like.
那么暗模式网站在哪里? (So Where Are the Dark Mode Websites?)
While this feature is live today and working in all the popular browsers, it’s very new. Dark mode comes to iPhone and iPad with the new iOS 13. On the Android side, only Android phones with the new Android 10 have dark mode support. Even Google Chrome on desktop has only supported prefers-color-scheme for a few weeks.
It’s just so new. You likely won’t encounter many websites that use prefers-color-scheme to automatically enable dark mode yet.
太新了。 您可能不会遇到许多使用Preferred-Color-Scheme自动启用暗模式的网站。
That will hopefully change in the future. Websites can now respect your dark mode preference and automatically follow it. Web developers have a new option they can take advantage of.