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.


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.


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

(View all)
Avatar
19 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)
Avatar
19 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)
Avatar
19 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)
Avatar
19 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)
Avatar
19 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)
Avatar
19 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

Kuo: iPhone 12 Models Won't Include Charger in Box, 20W Power Adapter Will Be Sold Separately

Sunday June 28, 2020 7:56 am PDT by
iPhone 12 models will not include EarPods or a power adapter in the box, analyst Ming-Chi Kuo said today in a research note obtained by MacRumors. This lines up with a prediction shared by analysts at Barclays earlier this week. Kuo said that Apple will instead release a new 20W power adapter as an optional accessory for iPhones and end production of its existing 5W and 18W power adapters...

Rosetta 2 Benchmarks Surface From Mac Mini With A12Z Chip

Monday June 29, 2020 7:48 am PDT by
While the terms and conditions for Apple's new "Developer Transition Kit" forbid developers from running benchmarks on the modified Mac mini with an A12Z chip, it appears that results are beginning to surface anyhow. Image Credit: Radek Pietruszewski Geekbench results uploaded so far suggest that the A12Z-based Mac mini has average single-core and multi-core scores of 811 and 2,781...

Kuo: Apple to Launch 10.8-Inch iPad Later This Year, 8.5-Inch iPad Mini in 2021

Sunday June 28, 2020 9:04 am PDT by
Apple plans to launch a new 10.8-inch iPad in the second half of 2020, followed by a new 8.5-inch iPad in the first half of 2021, oft-reliable analyst Ming-Chi Kuo said today in a research note obtained by MacRumors. Kuo did not specify if the 10.8-inch iPad model will be a new version of the existing 10.2-inch iPad or the 10.5-inch iPad Air, but he has previously said that the 8.5-inch...

Apple's A12Z Under Rosetta Outperforms Microsoft's Native Arm-Based Surface Pro X

Monday June 29, 2020 10:31 am PDT by
Apple's Developer Transition Kit equipped with an A12Z iPad Pro chip began arriving in the hands of developers this morning to help them get their apps ready for Macs running Apple Silicon, and though forbidden, the first thing some developers did was benchmark the machine. Multiple Geekbench results have indicated that the Developer Transition Kit, which is a Mac mini with an iPad Pro chip, ...

Developers Begin Receiving Mac Mini With A12Z Chip to Prepare Apps for Apple Silicon Macs

Monday June 29, 2020 5:43 am PDT by
As part of WWDC last week, Apple announced that it will be switching to its own custom-designed processors for Macs starting later this year. As part of this transition, the company is allowing developers to apply for a modified Mac mini with an A12Z chip and 16GB of RAM to develop and test their apps on a Mac with Arm-based architecture. As noted on Twitter and in the MacRumors forums, some...

The New York Times Ends Apple News Partnership and Pulls All Articles

Monday June 29, 2020 11:17 am PDT by
The New York Times today announced that it is pulling out of Apple News, as the service does not "align with its strategy of building direct relationships with paying readers." Starting today, articles from The New York Times will no longer show up in the Apple News app. The news site says that Apple has given it "little in the way of direct relationships with readers" and "little control...

'iPhone 12 Pro' Models Could Be Capable of Shooting 4K Video at 120fps and 240fps

Monday June 29, 2020 3:57 am PDT by
Two new camera modes could be coming to some models of Apple's "iPhone 12," according to YouTube channel EverythingApplePro and Max Weinbach. Specifically, the video modes are said to include the ability to shoot 4K video at 120fps and 240fps. The new modes are thought to be coming to Apple's higher-end "iPhone 12 Pro" and "iPhone 12 Pro Max". Weinbach reportedly tore down the Camera app...

Facebook Begins Dark Mode Rollout for iOS

Monday June 29, 2020 1:18 am PDT by
Facebook has begun rolling out Dark Mode support for its flagship iOS app, which comes just over a year after the Facebook Messenger app also gained Dark Mode support. Photo via 9to5Mac After evidence showing the company had been working on the feature surfaced in April, select users are now able to activate the feature under Settings & Privacy within the Menu tab. Users are able to choose...

TikTok App to Stop Accessing User Clipboards After Being Caught in the Act by iOS 14

Thursday June 25, 2020 4:06 pm PDT by
A new feature in iOS 14 alerts users when apps read the clipboard, and it turns out some apps have been reading clipboard data excessively. Image via Jeremy Burge TikTok users who upgraded to iOS 14, for example, quickly noticed constant alerts warning them that TikTok was accessing the clipboard every few seconds. After being caught, TikTok now says that it's removing the feature. Okay so ...

Apple Launches 'Path to Apple Card' Program to Help Declined Applicants Get Approved

Monday June 29, 2020 12:30 pm PDT by
Apple today launched a new Apple Card program and website that are designed to help people who have their Apple Card applications declined improve their credit to qualify, reports TechCrunch. Starting today, declined Apple Card applicants will begin seeing emails that offer the Path to Apple Card program, which is opt-in and can run for four months. It uses the information from the initial...