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.

Related Forum: macOS Mojave

Top Rated Comments

nortonandreev Avatar
76 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
76 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
76 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
76 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
76 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
76 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)

Popular Stories

iPhone SE 4 Thumb 1

iPhone SE 4 With Apple's Own 5G Modem 'Confirmed' to Launch in March

Tuesday November 19, 2024 12:12 pm PST by
Barclays analyst Tom O'Malley and his colleagues recently traveled to Asia to meet with various electronics manufacturers and suppliers. In a research note this week, outlining key takeaways from the trip, the analysts said they have "confirmed" that a fourth-generation iPhone SE with an Apple-designed 5G modem is slated to launch towards the end of the first quarter next year. In line with previo...
airtag purple

AirTag 2 Rumored to Launch Next Year With These New Features

Sunday November 17, 2024 5:18 am PST by
Apple released the AirTag in April 2021, so it is now three over and a half years old. While the AirTag has not received any hardware updates since then, a new version of the item tracking accessory is rumored to be in development. Below, we recap rumors about a second-generation AirTag. Timing Apple is aiming to release a new AirTag in mid-2025, according to Bloomberg's Mark Gurman....
Magic Mouse Next to Keyboard

No, Apple CEO Tim Cook Didn't Say He Prefers Logitech's MX Master 3 Over the Magic Mouse

Sunday November 17, 2024 3:03 pm PST by
While the Logitech MX Master 3 is a terrific mouse for the Mac, reports claiming that Apple CEO Tim Cook prefers that mouse over the Magic Mouse are false. The Wall Street Journal last month published an interview with Cook, in which he said he uses every Apple product every day. Soon after, The Verge's Wes Davis attempted to replicate using every Apple product in a single day. During that...
Generic iOS 18 Feature Real Mock

Apple Releases iOS 18.1.1 and iPadOS 18.1.1 With Security Fixes

Tuesday November 19, 2024 10:10 am PST by
Apple today released iOS 18.1.1 and iPadOS 18.1.1, minor updates to the iOS 18 and iPadOS 18 operating systems that debuted earlier in September. iOS 18.1.1 and iPadOS 18.1.1 come three weeks after the launch of iOS 18.1. The new software can be downloaded on eligible iPhones and iPads over-the-air by going to Settings > General > Software Update. Apple has also released iOS 17.7.2 for...
at t turbo indicator iphone 16 pro max v0 8hrh7w5f3w1e1

AT&T Turbo Indicator Showing Up in iPhone Status Bar for Subscribers

Wednesday November 20, 2024 3:42 am PST by
AT&T has begun displaying "Turbo" in the iPhone carrier label for customers subscribed to its premium network prioritization service, according to reports on Reddit. The new indicator seems to have started appearing after users updated to iOS 18.1.1, but that could be just coincidence. Image credit: Reddit user No_Highlight7476 The Turbo feature provides enhanced network performance through ...
iPhone 17 Slim Feature Single Camera 1 Redux

'iPhone 17 Air' Rumored to Surpass iPhone 6 as Thinnest iPhone Ever

Monday November 18, 2024 1:07 pm PST by
In a research note with Hong Kong-based investment bank Haitong today, obtained by MacRumors, Apple analyst Jeff Pu said he agrees with a recent rumor claiming that the so-called "iPhone 17 Air" will be around 6mm thick. "We agreed with the recent chatter of an 6mm thickness ultra-slim design of the iPhone 17 Slim model," he wrote. If that measurement proves to be accurate, there would be ...
bug security vulnerability issue fix larry

Make Sure to Update: iOS 18.1.1 and macOS Sequoia 15.1.1 Fix Actively Exploited Vulnerabilities

Tuesday November 19, 2024 10:52 am PST by
The iOS 18.1.1, iPadOS 18.1.1, and macOS Sequoia 15.1.1 updates that Apple released today address JavaScriptCore and WebKit vulnerabilities that Apple says have been actively exploited on some devices. With the JavaScriptCore vulnerability, processing maliciously crafted web content could lead to arbitrary code execution. The WebKit vulnerability had the same issue with maliciously crafted...