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
72 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
72 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
72 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
72 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
72 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
72 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 Vertical Camera Feature

iPhone SE 4 Rumored to Use Same Rear Chassis as iPhone 16

Friday July 19, 2024 7:16 am PDT by
Apple will adopt the same rear chassis manufacturing process for the iPhone SE 4 that it is using for the upcoming standard iPhone 16, claims a new rumor coming out of China. According to the Weibo-based leaker "Fixed Focus Digital," the backplate manufacturing process for the iPhone SE 4 is "exactly the same" as the standard model in Apple's upcoming iPhone 16 lineup, which is expected to...
iPhone 16 Pro Sizes Feature

iPhone 16 Series Is Just Two Months Away: Everything We Know

Monday July 15, 2024 4:44 am PDT by
Apple typically releases its new iPhone series around mid-September, which means we are about two months out from the launch of the iPhone 16. Like the iPhone 15 series, this year's lineup is expected to stick with four models – iPhone 16, iPhone 16 Plus, iPhone 16 Pro, and iPhone 16 Pro Max – although there are plenty of design differences and new features to take into account. To bring ...
bsod

Crowdstrike Says Global IT Outage Impacting Windows PCs, But Mac and Linux Hosts Not Affected

Friday July 19, 2024 3:12 am PDT by
A widespread system failure is currently affecting numerous Windows devices globally, causing critical boot failures across various industries, including banks, rail networks, airlines, retailers, broadcasters, healthcare, and many more sectors. The issue, manifesting as a Blue Screen of Death (BSOD), is preventing computers from starting up properly and forcing them into continuous recovery...
iphone 14 lineup

Cellebrite Unable to Unlock iPhones on iOS 17.4 or Later, Leak Reveals

Thursday July 18, 2024 4:18 am PDT by
Israel-based mobile forensics company Cellebrite is unable to unlock iPhones running iOS 17.4 or later, according to leaked documents verified by 404 Media. The documents provide a rare glimpse into the capabilities of the company's mobile forensics tools and highlight the ongoing security improvements in Apple's latest devices. The leaked "Cellebrite iOS Support Matrix" obtained by 404 Media...
Apple Watch Series 9

2024 Apple Watch Lineup: Key Changes We're Expecting

Tuesday July 16, 2024 7:59 am PDT by
Apple is seemingly planning a rework of the Apple Watch lineup for 2024, according to a range of reports from over the past year. Here's everything we know so far. Apple is expected to continue to offer three different Apple Watch models in five casing sizes, but the various display sizes will allegedly grow by up to 12% and the casings will get taller. Based on all of the latest rumors,...
tinypod apple watch

TinyPod Turns Your Apple Watch Into an iPod

Wednesday July 17, 2024 3:18 pm PDT by
If you have an old Apple Watch and you're not sure what to do with it, a new product called TinyPod might be the answer. Priced at $79, the TinyPod is a silicone case with a built-in scroll wheel that houses the Apple Watch chassis. When an Apple Watch is placed inside the TinyPod, the click wheel on the case is able to be used to scroll through the Apple Watch interface. The feature works...