Using Dark Mode in CSS with MacOS Mojave

This is a very interesting step, considering that Apple's interface guidelines prefer that application "content" remain regularly styled (e.g. as Pages does). This seems to show that Safari's web view has been changed from being merely content to being part of the user interface, as it would in say web applications. Presumably document creation websites e.g. Google Docs would be encouraged to maintain a light-themed document while darkening the interface.

Another interesting point is this might lead to yet more fingerprinting surface area. But overall, I think I'll take that over blinding myself at night.

Re: Using Dark Mode in CSS with MacOS Mojave

#5

Post by red-tea » Thu, Oct 25, 2018, 8:27 AM UTC

Firefox has the option to set default colours based on your theme, so mine are set to dark colours. However, I find that many sites become unusable because they assumed the user defaults would be black text on white background. I use Stylus to override things which sometimes works but not always. Is there actually a way to fix this?

Re: Using Dark Mode in CSS with MacOS Mojave

#6

Post by saagarjha » Thu, Oct 25, 2018, 8:30 AM UTC

red-tea wrote: post #5

Firefox has the option to set default colours based on your theme, so mine are set to dark colours. However, I find that many sites become unusable because they assumed the user defaults would be black text on white background. I use Stylus to override things which sometimes works but not always. Is there actually a way to fix this?

This API, presumably, once websites adopt it and actually add CSS to support darker themes.

Re: Using Dark Mode in CSS with MacOS Mojave

#7

Post by kristofferR » Thu, Oct 25, 2018, 8:38 AM UTC

Dark Reader for Safari makes the web dark automatically when Dark Mode is enabled: https://darkreader.org/safari/

Unfortunately it doesn't work in Chrome or Firefox yet, as they haven't implemented proper APIs.

Re: Using Dark Mode in CSS with MacOS Mojave

#8

Post by modernerd » Thu, Oct 25, 2018, 8:41 AM UTC

This is a great blog post to build awareness of the prefers-color-scheme feature.

But I don't think it's safe to assume that someone who sets a dark UI also wants web pages displayed like that.

I set dark mode in macOS to have the UI fade into the background and reveal the content; I don't want or expect that websites will present white text on a dark background too. That's fine for coding but can be less readable for long form articles depending on the ambient lighting.

https://ux.stackexchange.com/q/53264/

Re: Using Dark Mode in CSS with MacOS Mojave

#9

Post by frobware » Thu, Oct 25, 2018, 9:02 AM UTC

As a partially sighted user this is fantastic news.

Re: Using Dark Mode in CSS with MacOS Mojave

#10

Post by cprecioso » Thu, Oct 25, 2018, 9:25 AM UTC

saagarjha wrote: post #4

This is a very interesting step, considering that Apple's interface guidelines prefer that application "content" remain regularly styled (e.g. as Pages does). This seems to show that Safari's web view has been changed from being merely content to being part of the user interface, as it would in say web applications. Presumably document creation websites e.g. Google Docs would be encouraged to maintain a light-themed…

However, Mail does have a dark stylesheet for the viewer when Dark Mode is enabled. I guess this can be done when there's a concept of a base stylesheet which people can the overwrite if needed.

Word processors don't have this concept, and what you see is (supposed to be) always exactly what you get. So Pages doesn't display dark documents because the output then should be a dark document.