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

[MacRumors]

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.

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

 

[twistedpixel8]

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.

 

[Kangastu]

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!

 

[Bustycat]

Can’t wait for Wordpress to add this!

 

[netdudeuk]

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.

Agreed.

They should start at www.apple.com

 

[confusedpurple]

As a web dev I will not be supporting this in any way, shape or form. Such an idiotic approach from Apple on this. We spent years trying to get away from vendor lock-ins on the web, and we're on the verge of another one with Chrome already, the last thing we need is this kind of crap.

 

[twistedpixel8]

As a web dev I will not be supporting this in any way, shape or form. Such an idiotic approach from Apple on this. We spent years trying to get away from vendor lock-ins on the web, and we're on the verge of another one with Chrome already, the last thing we need is this kind of crap.

Which Chrome one are you referring to? I'm terrified I've missed this... things change so fast in Web Dev it's difficult to keep up with everything!

 

[nortonandreev]

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.

 

[Fuchal]

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.

 

[twistedpixel8]

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.

 

[GaryMumford]

Am I missing something? Kevin Chen says he's just swapped the text and background colours... so why does the green/blue top menu disappear in dark mode?

 

[Pakaku]

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.

 

[twistedpixel8]

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.

Dark mode is not the problem. Dark mode is a great idea. Nobody is complaining about its existence; we're merely pointing out that this is not a 5 minute job for the majority of websites. I'd somewhat equate this to the pre-responsive era of web design where a completely separate mobile site was typically developed.

Maybe these "web designers" who use SquareSpace and Wix (I just vomited in my mouth a little) will have no issue because eventually this will be done for them by the stock theme designers. They'll still look trash and be bloated as hell but hey: dark mode "works".

 

[theOmega]

I think this is awesome, not for every website, but often I find myself enabling the reader view in pitch dark to get away from the brightness.

Most likely dark mode is coming to iOS soon.

 

[zeekyr]

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.

It's actually not that difficult to implement dark mode via some CSS modifications. I say this because instead of putting this on the web developer of each individual site, you can just use an addon like Cascadia and customize the CSS yourself and with existing styles on the web. When I open the New York Times, I see this:

The work to do this is often just the CSS filter invert property applied to various elements.

 

[revmacian]

It's actually not that difficult to implement dark mode via some CSS modifications. I say this because instead of putting this on the web developer of each individual site, you can just use an addon like Cascadia and customize the CSS yourself and with existing styles on the web. When I open the New York Times, I see this:

The work to do this is often just the CSS filter invert property applied to various elements.

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.

 

[justperry]

Hmm, seems like there's a bug in my darkmode....

Darkmode set, Menu Bar is in darkmode and so is the dock, the rest however.....

 

[zeekyr]

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.

 

[revmacian]

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.

Thank you very much for the information! I'm really hoping that web developers can do this on all websites, or we can get a plugin for Safari that can get it right all by itself without the need to fix what the plugin missed.

 

[MacSince1985]

Can’t wait for Wordpress to add this!

It would not be added at the WordPress (app) level, but at the theme level. So it will depend on how many theme designers decide to include it in their theme, which in turn depends on how many browsers support that media query.

On the plus side, I am happy to see this handled via media queries, which the designer can control, rather than by an algorithm for automatically inverting colors.

 

[nortonandreev]

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.

I don't see it as a "huge" problem, because if the user wants Dark Mode, it is an additional requirement so you have the right to ask for more money. Saying something will make a problem, just because it is available as an option, is stupid. Because a customer might want basic website, for example, even if you can do something much more advanced using different frameworks and etc. So if a technology exists doesn't imply that it will have to be used all of the time. Having an option available is always good, cuz you if want to use - you can. It doesn't mean you will have to or have to do it for free.

 

[palmerc2]

I’ve used the chrome extension Dark Reader which inverts all colors except photos. It was a dream.

I now use Brave which I know I can use a chrome extension, but I don’t have any as I know they’re vulnerable to privacy attacks.

 

[MacSince1985]

I'm really hoping that web developers can do this on all websites, or we can get a plugin for Safari that can get it right all by itself without the need to fix what the plugin missed.

It's more a matter of whether the client requests it and is willing to pay for the additional development time. From my experience, clients are fixated on how their site looks like on their device (OS, browser, screen size) and it is hard to get them to consider, let alone pay for, something they don't personally see or use.

A plugin will never "get it right". At best it can make an educated guess of what colors to substitute (e.g. inverting the luminosity but preserving the hue and saturation). But it won't be able to substitute images with their dark mode optimized counterpart, etc.

Take for example the MacRumors logo at the top of this page. If you change the background to black, you end up unreadable dark blue "text" on black. If the plugin is smart enough to recognize that the image contains text and inverts it ( {filter: invert();} ), you get a light blue apple with a pink leave and a black core. Certainly not what the designer envisioned. Even if you try to preserve the hue ( {filter: invert() hue-rotate(180deg);} ), the result is pretty ugly.
[doublepost=1548695218][/doublepost]

As a web dev I will not be supporting this in any way, shape or form. Such an idiotic approach from Apple on this. We spent years trying to get away from vendor lock-ins on the web, and we're on the verge of another one with Chrome already, the last thing we need is this kind of crap.

This feature is in the W3C draft using the exact same media query wording Apple is using. It changed a few times during development discussions, but seems to be settled on "prefers-color-scheme". So this will become a standard sooner or later. We're not in the browser war era where each browser added proprietary features. But we still have experimental features in each browser and different adoption rates of standard features.
https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme

 

[revmacian]

I'm using Dark Reader right now, thanks for the suggestion @zeekyr

I saw a problem with new tabs being initially white. What I have been doing was to Command+Click on a link to open the link in a new tab behind the current tab (open a new tab in the background). Then when I switched to the new tab it would flash white before Dark Reader had a chance to change the theme to a dark theme. But, I found a way to stop that behavior.

If I open a new tab behind the current tab (background), then the new tab will be white (unchanged theme) and then quickly switch to the dark theme. This results in a flash of white before the theme is changed by Dark Reader.

But, if I change the Safari setting to “open a new link and make it active” (this opens new tabs in the foreground), then the new tab starts in dark mode and the flash of white is never seen.

I feel it may help users to know about this change so that they never experience a flash of white when opening links in a new tab.

Here is how to make the change for Safari users on macOS Mojave:
1. Open Safari > Preferences > Tabs
2. Check the box entitled “When a new tab or window opens, make it active”
3. Close Safari Preferences and continue using Safari as normal

I hope this can help someone who is new to dark Reader.
[doublepost=1548695742][/doublepost]

It's more a matter of whether the client requests it and is willing to pay for the additional development time. From my experience, clients are fixated on how their site looks like on their device (OS, browser, screen size) and it is hard to get them to consider, let alone pay for, something they don't personally see or use.

A plugin will never "get it right". At best it can make an educated guess of what colors to substitute (e.g. inverting the luminosity but preserving the hue and saturation). But it won't be able to substitute images with their dark mode optimized counterpart, etc.

Take for example the MacRumors logo at the top of this page. If you change the background to black, you end up unreadable dark blue "text" on black. If the plugin is smart enough to recognize that the image contains text and inverts it ( {filter: invert();} ), you get a light blue apple with a pink leave and a black core. Certainly not what the designer envisioned. Even if you try to preserve the hue ( {filter: invert() hue-rotate(180deg);} ), the result is pretty ugly.

Ah, yes, I see what you mean. Thank you for that information. I'm going to play around with the Cascadea app that @zeekyr mentioned and see if I can come up with something to my liking.. I need to amend my habits a bit.

 

[macduke]

Just one more thing to add to my pile of work as a web developer and designer. Every year more and more on my plate and no more people to help me. First they wanted everything dynamic. Then they wanted content management systems with databases. Then they wanted responsive for every device display size. Then everything moved towards random frameworks that aren't supported longer than a year and everything breaks all the time. Then there were more large mobile display sizes. Then security became more of a pain, mostly becomes of the content management systems and frameworks. Then they wanted everything accessible. Then there were smartwatch display sizes. Then content management systems started changing on a fundamental level requiring rewrites of huge chunks of code. Then we got this dark mode stuff.

I've probably forgotten other crap I've had to deal with but these are the main points since I started making sites as a middle school kid in the late 90s and I feel like most of that is in the past 7 years.