Website Demos Safari Browser's Upcoming Support for Dark Mode CSS in macOS Mojave 10.14.4

by

In the next official update to macOS Mojave, Apple's Safari browser will enable automatic Dark Mode for websites that support it.

safari dark mode for websites
Since the release of Safari Technology Preview 68 in October, Apple has been building support for the use of ‌Dark Mode‌ CSS, which can be enabled via its Develop -> Experimental Features menu. The experimental feature has now also made its way into the latest macOS Mojave 10.14.4 developer beta.

macOS Mojave enables users to switch between Light and Dark mode via System Preferences -> General. With the latest macOS developer beta installed, websites that support the new CSS query will automatically adapt their color scheme to match whichever system-wide option the user has enabled.

dark mode safari website
As noted by iDownloadblog, developers running the macOS 10.4.4 beta can test out the new feature by visiting software engineer Kevin Chen's website, which already supports the new Safari CSS media query. Everyone else can give it a spin by downloading the latest version of Safari Technology Preview, which can be run alongside vanilla Safari in any version of macOS Mojave.

Top Rated Comments

nortonandreev Avatar
24 months ago

While this is neat, I can’t see it being widely implemented by websites.

I’m a web dev and I feel like unless this becomes a standard across all browsers, we simply won’t implement designs for it. It’s a further cost to our clients (and a pretty major one in reality) and for a single web browser? A web browser that only runs on a single OS? I doubt many companies will be keen to spend money on this.

Others browsers will implement support for it as well, eventually. Also, Windows 10 has already got dark theme, so it makes sense for other browsers to have it as well. Chrome and Firefox are already working on it. When it comes to adding support for it and the costs related to it, I think it mostly depends on how big the website is, but for my personal website I added the query for like 5 minutes. I think it is really nice feature and hope to become widespread in near future. Just because you feel like it's "useless", doesn't mean it's the case for everyone else.
Score: 4 Votes (Like | Disagree)
Fuchal Avatar
24 months ago

Others browsers will implement support for it as well, eventually. Also, Windows 10 has already got dark theme, so it makes sense for other browsers to have it as well. Chrome and Firefox are already working on it. When it comes to adding support for it and the costs related to it, I think it mostly depends on how big the website is, but for my personal website I added the query for like 5 minutes. I think it is really nice feature and hope to become widespread in near future. Just because you feel like it's "useless", doesn't mean it's the case for everyone else.

And if your website already has a dark mode, it's just a matter of automatically choosing it as the default.
Score: 4 Votes (Like | Disagree)
twistedpixel8 Avatar
24 months ago

Others browsers will implement support for it as well, eventually. Also, Windows 10 has already got dark theme, so it makes sense for other browsers to have it as well. Chrome and Firefox are already working on it. When it comes to adding support for it and the costs related to it, I think it mostly depends on how big the website is, but for my personal website I added the query for like 5 minutes. I think it is really nice feature and hope to become widespread in near future. Just because you feel like it's "useless", doesn't mean it's the case for everyone else.

I don't remember calling it "useless". My point was that it's an additional burden on Web Devs and that translates directly into cost which has to be eaten by someone. And I sure as heck am not eating it.

Respectfully, if you're happy with implementing Dark Mode as an afterthought, the 5 minute approach will probably suffice. If, however, you do things properly, you need to consider the aesthetics/UX of the site as a whole and make all the same considerations you would when designing the default aesthetics/UX.

Maybe if the site is extremely basic with 95% of it black text on white background, you'd get away with it. The issue is that if users start to expect all sites to work with Dark Mode, you create a huge problem.
Score: 4 Votes (Like | Disagree)
Kangastu Avatar
24 months ago
I think the Mac / iOS specialist sites (MacRumors / 9to5mac etc) and third party manufacturers that specialise in Apple stuff (twelve south, etc) may do this, but as a web dev myself I second twistedpixel8’s comments - unless it becomes a global “dark mode” standard, uptake of this is going to be slow to non existent.

Love the idea and the direction.

Side note: I hope this points to iOS13 having a dark mode!
Score: 3 Votes (Like | Disagree)
zeekyr Avatar
24 months ago

I've been looking for something like this to go with dark mode on my 2017 MBP running Mojave. Is this something that the end user can do right now? If so, can you link a tutorial? I used to do web development myself, so I'm comfortable with CSS.

I'm using these two addons to achieve this affect:

https://darkreader.org

No CSS editing is needed for that one.

https://cascadea.app

This one lets you customize the CSS of any website further. For example, I used this addon to invert the NYT logo, because Dark Reader didn't automatically do that. It lets you tweak and customize things even more.
Score: 2 Votes (Like | Disagree)
Pakaku Avatar
24 months ago
There are websites out there that already offer a dark theme you can switch on or off. I doubt it would be that difficult to automate that switch if the theme is in place already, and I wonder if the complainers here really should be ignoring a feature many people would find useful.
Score: 2 Votes (Like | Disagree)

Top Stories

0 Deals Hero

Black Friday 2020: Best Apple Deals to Plan For

Saturday November 21, 2020 10:00 am PST by
In the lead-up to Black Friday next week, we've been putting a spotlight on the best deals coming from various retailers like Best Buy and Walmart. In an effort to further prepare our readers for the best Black Friday deals, we're breaking down what we think should be on your radar for Black Friday in 2020. Note: MacRumors is an affiliate partner with some of these vendors. When you click a...
2020 apple shopping event

Apple Offering Up to $150 Gift Card With Select Products on Black Friday Through Cyber Monday

Monday November 23, 2020 2:53 am PST by
Apple has announced its annual four-day shopping event, offering customers up to a $150 Apple Store gift card with the purchase of select products between Black Friday and Cyber Monday in the United States. The gift card values in the United States are as follows: $150 for 16-inch MacBook Pro $150 for 21.5-inch iMac $50 for 13-inch MacBook Pro $50 for MacBook Air $50 for iPhone SE,...
m1 mac mini vignette

Apple Lists M1-Based Mac Mini Logic Boards With 10 Gigabit Ethernet in Internal Parts Ordering System

Friday November 20, 2020 9:32 am PST by
While the new Mac mini with the M1 chip is only available with Gigabit Ethernet, Apple has listed multiple M1-based Mac mini logic boards with 10 Gigabit Ethernet in an internal parts list for Apple Authorized Service Providers. For every Mac mini logic board with Gigabit Ethernet in the parts list, obtained by MacRumors, there is a corresponding logic board with 10 Gigabit Ethernet:...
ipad pro 2020 display

Black Friday Week Kicks Off With Up to $150 Savings on 2020 iPad Pro

Sunday November 22, 2020 2:37 pm PST by
As we head into Black Friday week, we're seeing some of the best deals of the season so far, with Amazon and Best Buy today discounting the latest iPad Pro models by up to $150 at the lowest prices we've ever tracked on these models. Note: MacRumors is an affiliate partner with some of these vendors. When you click a link and make a purchase, we may receive a small payment, which helps us keep ...
macos big sur m1 macs restore issue

Apple Provides Instructions to Fix macOS Reinstallation Errors on M1 Macs

Sunday November 22, 2020 3:30 pm PST by
Shortly after the launch of Apple's new M1 Macs, we saw reports that attempts to restore and reinstall macOS on those machines right away could result in an installation error that would leave your Mac non-functional. Specifically, the error message would read: "An error occurred preparing the update. Failed to personalize the software update. Please try again." Over the weekend, Apple p...
iPhone 6s main

Rumor Claims iOS 15 to Drop Support for iPhone 6s and Original iPhone SE

Sunday November 22, 2020 9:25 am PST by
Apple will drop support for the iPhone SE, iPhone 6s, and iPhone 6s Plus in next year's release of iOS 15, according to a rumor shared today by Israeli site The Verifier. If the rumor is accurate, that would mean iOS 15 will be compatible with the following Apple devices: 2021 iPhone series iPhone 12 Pro Max iPhone 12 Pro iPhone 12 mini iPhone 12 iPhone 11 iPhone 11 Pro iPhone 11 Pro ...
new m1 chip

Craig Federighi: Native Windows on M1 Macs is 'Really up to Microsoft'

Friday November 20, 2020 11:57 am PST by
Following the release of the M1 Macs Apple executives have been doing interviews with a range of publications, and today, Ars Technica published another interview with software engineering chief Craig Federighi, hardware technologies lead Johny Srouji, and marketing VP Greg Joswiak. Much of the interview focuses on topics that the three have already covered in prior discussions, but there is ...
Walmart November Deals Hero

Black Friday Spotlight: Walmart Will Have AirPods Pro Down to Lowest Price of $169, and More Apple Deals

Thursday November 19, 2020 8:05 am PST by
We've been tracking early Black Friday deals in our dedicated Black Friday Roundup, and in an effort to prepare our readers for the big shopping event we're highlighting sales store-by-store in the lead-up to November 27. Note: MacRumors is an affiliate partner with Walmart. When you click a link and make a purchase, we may receive a small payment, which helps us keep the site running. Next ...
xlK6MS4MLqVFaskl

iFixit Shares iPhone 12 Pro Max Teardown Revealing L-Shaped Battery and Bigger Camera Module

Sunday November 22, 2020 2:53 am PST by
In the last of its iPhone 12 series teardowns, iFixit has published its iPhone 12 Pro Max disassembly, which reveals some unique differences in the design of the internals, including the full extent of the larger camera system responsible for the improved low-light performance on Apple's largest iPhone to date. On opening the iPhone 12 Pro Max, the first obvious difference compared to the...
apple leather sleeve

Leather Sleeve for iPhone 12 Models Now Available From Apple

Friday November 20, 2020 12:16 pm PST by
Apple today began selling the Leather Sleeve for the new iPhone 12 models, with the accessory having first been announced alongside the updated iPhones in October. Priced at $129, the Leather Sleeve is not a case and is designed to be removed when the iPhone is in use. It features a cutout at the front that displays the time, and it comes with a matching leather strap. According to Apple, it ...