
Using Dark Mode in CSS with MacOS Mojave - alwillis
https://paulmillr.com/posts/using-dark-mode-in-css/
======
modernerd
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/](https://ux.stackexchange.com/q/53264/)

~~~
S_A_P
As a counterpoint, I find a white app or webpage jarring in dark mode and much
prefer light/white text on dark background. I’m happy that the rest of the os
is catching up with how I’ve run my IDE for years.

~~~
Fuxy
it is but it's not feasible for the system theme to change the styles of
websites.

Just ask any Linux user that uses dark themes and you will find out what
happens when the system theme messes with the site theme.

I myself always set a light theme in my Firefox config so I don't get a black
on black text/background issue.

With how customized the styling on sites is every site needs to implement
their own dark version otherwise you will run into situations where the
styling is broken.

~~~
SpacePotatoe
>it is but it's not feasible for the system theme to change the styles of
websites. Just ask any Linux user that uses dark themes and you will find out
what happens when the system theme messes with the site theme.

It is done completely different fashion than it was done on gnu/linux, on
linux it was probably done by changing user agent style sheet (changes default
bg color on body etc), when here it is done with media query (which webdev
must explicit implement on his part so he can make sure that everything
works).

------
alwillis
Proposed standard: [https://drafts.csswg.org/mediaqueries-5/#descdef-media-
prefe...](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-
color-scheme)

------
crazygringo
I'm not sure I can take it anymore. Websites are just getting too complicated
to design and build.

First it was desktop with mouse -- easy. Then responsive design requiring both
desktop and mobile layouts, as well as interaction design with both mouse and
touch. Now what if users start expecting both light and dark versions of
websites? "We show the mobile version of the menu with its own hover on small
screens only, but the hover only appears if JavaScript detects a mouse, but
wait we need a different hover color when it's in dark mode!"

Not to mention other standard things like making sure it works in all major
browsers, or even that interactive things like comments or voting have non-
JavaScript fallbacks, or that the order of elements is appropriate for
screenreaders.

I love using dark mode at night, and as a user would love for every website to
follow it too. But as a developer, there are just too many combinations to
design and test for, and it's growing exponentially!

~~~
lostgame
I think the largest issue with this is it is currently a Safari-only, and an
early Safari-only release at that. And that the latest MacOS right now is the
only major commercial OS offering a dark theme to the extent that it does.

A quick look at Safari's desktop browser market share reveals it to be about
4% right now. When this kind of standard makes its way into Chrome and/or FF,
it'll be relevant.

Until then, it's a toy, and nothing more. Nobody could ever realistically
expect this kind of thing. It doesn't increase the complexity of web design by
that much. If you think adding CSS exceptions for inverted colours is the
straw that broke the camel's back on web complexity for you, perhaps you just
feel like we should've stuck with the late 90's or worse, early 00's web
standards?

Many websites, even YouTube, already have a 'night' or 'dark' switch. It makes
a lot of sense, and genuinely is not that hard to implement.

~~~
saagarjha
Chrome and Firefox might end up implementing this to serve their users on
macOS.

------
rhacker
As usual Apple has set off a major change in the way we do business.
Newspapers, Apps, Slack, everything is going to start supporting dark mode. I
think the original way we tackled "custom color schemes" of the OS was too
much - we allowed people to set individual colors for everything. Once again
apple has simplified that to just light mode and dark mode. And that's how the
rest of the industry will finally tackle custom color schemes (no choice but
light or dark) and the OS will now dictate that setting automatically much
like en-US, es-MX etc..

~~~
matchbok
Sad to realize that if Slack had a real, native app, most of the conversion
would be a simple toggle.

~~~
untog
Not really. Slack would have to have a real, native app that used exclusively
stock OS controls. I very much doubt they'd do that, so there would still be a
lot of work required to implement dark mode.

~~~
favorited
It's honestly not much dev work at all (took me a couple days on a medium size
app). The real time sink is with design, because virtually any custom color
you're using in the application will need a dark variant.

------
saagarjha
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.

~~~
cprecioso
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.

~~~
gardaani
Apple is proposing a new CSS color-filter property [1], which would do the
same thing as Mail does for its content. Actually, Apple is already using
color-filter internally in the Mail app.

Safari allows setting user style sheets in its Preferences: Advanced > Style
sheet, so one could perhaps add a user style sheet with color-filter.

[1] [https://github.com/w3c/csswg-
drafts/issues/2875](https://github.com/w3c/csswg-drafts/issues/2875)

~~~
stephenr
There are several safari extensions available already which bring dark-mode to
websites. Based on the results I _beleive_ at least some of the one I’m using
must be using a filter (rather than using say manually mapped colours in a
hash).

------
robin_reala
I’ll have to check Apple Books for this when it makes it into release WebKit.
Currently we’re using :root[__ibooks_internal_theme*="Night"] to target the
dark mode there (inverting black and white SVGs, etc.), but if we can use a
more standardised media query that’d be a benefit.

------
kristofferR
Dark Reader for Safari makes the web dark automatically when Dark Mode is
enabled: [https://darkreader.org/safari/](https://darkreader.org/safari/)

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

~~~
mixmastamyk
It does, go up one directory to the root on that URL. Just installed it for
Chrome, am using "Dark backgrounds..." on Firefox.

~~~
skunkworker
He was referring to the automatically changing over option, eg: when Mojave
goes Dark tell Dark Reader to also go dark.

------
deanclatworthy
I think this is great. No-one is forcing you to implement this and if you do
change a few colours here and there to benefit those users who use dark mode -
it'd be hugely appreciated.

And for those worried about adding weight to your page just explicitly use the
media query and put the over-rides in a separate file:

<link media="(prefers-color-scheme: dark)" src="..." rel="stylesheet" />

------
PhasmaFelis
I recently heard about the Dark Reader extension for Chrome, which lets you
toggle dark settings per website in a fairly intelligent way.
[https://chrome.google.com/webstore/detail/dark-
reader/eimadp...](https://chrome.google.com/webstore/detail/dark-
reader/eimadpbcbfnmbkopoojfekhnkhdbieeh) I'm really liking it, and I'd be
interested to hear about something similar for Firefox.

~~~
jmbylsma
Dark Background and Light Text: [https://addons.mozilla.org/en-
US/firefox/addon/dark-backgrou...](https://addons.mozilla.org/en-
US/firefox/addon/dark-background-light-text/)

I'm not familiar with Dark Reader, but I'm guessing it's along the same lines.
I've used it with Firefox Mobile for a couple months and have been happy with
it.

------
e1ven
I really like this feature, and I hope the other browsers support it quickly.

I've been using [https://addons.mozilla.org/en-US/firefox/addon/dark-night-
mo...](https://addons.mozilla.org/en-US/firefox/addon/dark-night-mode/) to
convert webpages to darkmode.

It doesn't strictly invert, it tries to guess the color changes necessary to
make the site work in darker colors.

Example of how HN looks:
[https://i.imgur.com/E5licCH.jpg](https://i.imgur.com/E5licCH.jpg)

------
EugeneOZ
Cmd+F5, "Invert colors" (smart invert)

This will turn everything into dark mode, except images and video. And you
don't have to care if site has that line in CSS. Also, when you switch back -
everything is in "light mode" again, including OS UI.

~~~
Tallain
By default the keyboard shortcut is disabled in Mojave, and when turned on is
actually Control+Option+Command+8.

~~~
miles
Reenable the Control-Option-Command-8 keyboard shortcut to invert colors via:
System Preferences > Keyboard > Shortcuts > Accessibility > check "Invert
colors".

------
mixmastamyk
This is a welcome development.

FYI: Been using these extensions (or similar) for years to combat the white
background fascists that took over the web and removed control of the GUI
theme (in all 3 OSs!) in the last decade:

\- [https://addons.mozilla.org/firefox/addon/dark-background-
lig...](https://addons.mozilla.org/firefox/addon/dark-background-light-text/)

\- [https://darkreader.org/](https://darkreader.org/)

In a darkened studio environment, one of these is a must.

------
sneak
I, for one, am tired of web pages being able to know things about the
environment in which I view them outside of their sandbox. Orientation,
battery, point:pixel ratio, user-agent, referer- now UI display preferences.

I should be able to turn all of these off and make my browser
indistinguishable from any other save for IP address if I so choose. This
stuff just keeps rolling down the fingerprinting hill. Pretty soon they won’t
need cookies at all.

~~~
xvector
Canvas fingerprinting along with most of these issues were solved with Safari
12 on both Mac OS and iOS. If you don't want to be fingerprinted, consider
switching to it.

Obviously there are some things that aren't yet anonymized in Safari 12, but
it's good enough.

~~~
sneak
Safari’s code exec history (compared to Chrome) is enough to keep me from
switching back, even if it is better at privacy in the not-execing-malicious-
code typical use case.

Of course, on iOS, I don’t have a choice.

------
plehoux
If you are interested in how to make your Electron app dark mode compatible
(with CSS), here is how we did it: [https://medium.com/missive-app/make-your-
electron-app-dark-m...](https://medium.com/missive-app/make-your-electron-app-
dark-mode-compatible-c23dcfdd0dfa)

------
Polarity
i use this. best "turn everything into dark mode" ff plugin ever. supports per
website settings.
[https://github.com/darkreader/darkreader](https://github.com/darkreader/darkreader)

~~~
marcoperaza
I use the same plugin with Chrome and can also attest to it being absolutely
incredible.

------
frobware
As a partially sighted user this is fantastic news.

~~~
gardaani
The prefers-contrast media query is even better for accessibility [1]. It
allows checking if the OS is in high contrast mode and adjust the colors
appropriately.

I think the idea is to replace the Microsoft's proprietary -ms-high-contrast
media query [2]. It means that prefers-contrast will work in Mac and Windows.
Unfortunately, Safari Technology Preview 68 doesn't seem to implement it.

[1] [https://drafts.csswg.org/mediaqueries-5/#prefers-
contrast](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast)

[2]
[https://msdn.microsoft.com/library/Hh771830](https://msdn.microsoft.com/library/Hh771830)

~~~
robin_reala
That doesn’t always work though. Some people need to adjust their colours for
lower contrast, for example:
[https://accessibility.blog.gov.uk/2016/05/26/accessibility-a...](https://accessibility.blog.gov.uk/2016/05/26/accessibility-
and-me-marian-foley/) . Ideally sites would also work properly if the user
changes the foreground and background colours to suit their needs.

------
amai
On a side note, reading text in dark mode is better for your eyes:
[http://www.eye-tuebingen.de/the-institute/news-
events/news/n...](http://www.eye-tuebingen.de/the-institute/news-
events/news/news-article/60-why-might-reading-make-myopic/)

------
boltzmannbrain
Chrome extension: [https://chrome.google.com/webstore/detail/macos-mojave-
dark-...](https://chrome.google.com/webstore/detail/macos-mojave-dark-
mode/emoadoophllahfgbjaidlhjgnnmmdigh?hl=en)

------
Brajeshwar
For those, who like the Dark Theme on Mojave but not dark-dark everywhere.

    
    
      $ defaults write -g NSRequiresAquaSystemAppearance -bool Yes
    

Logout and Choose “Dark Mode".

Revert Back

    
    
      $ defaults write -g NSRequiresAquaSystemAppearance -bool No

------
sahoo
Only if Hacker news had dark mode

------
heavymark
This is great news. And as the author mentioned suitable for “web apps” rather
than something devs should add to general websites but certainly special use
cases where it could make sense there too.

------
dawnerd
I love me a good dark mode but what I can’t stand is when designers get lazy
and think dark mode = jet black with white text. Latest tweetbot is a great
example.

------
dewiz
Detecting the user preference for dark mode seems like one more variable to
fingerprint and identify users, isn't it?

~~~
alwillis
Mojave + Safari 12 has fingerprinting protection:
[https://www.wired.com/story/apple-safari-privacy-
wwdc/](https://www.wired.com/story/apple-safari-privacy-wwdc/)

------
k__
Reminds me of the use of operating system colors in CSS back in the days.

I tried to make websites look like native apps with these, haha.

~~~
konradzikusek
Those are still around, and are being used for fingerprinting devices.

------
bluedino
I could see sites moving to themes that supported both light and dark - a good
example of this is Arstechnica

------
shurcooL
Woohoo, I’ve been waiting for this.

Will it be possible to figure out the appearance preference with JacaScript as
well?

~~~
konradzikusek
Every media query can be checked using JS - `matchMedia('(prefers-color-
scheme: dark)').matches` => true/false

~~~
shurcooL
Excellent, thanks. I see this is mentioned in the original article too; I
must've missed it.

------
Rjevski
I would be concerned about adding yet another data point that can be used for
tracking.

------
mateuszf
That's pretty awesome.

~~~
mrweasel
Yeah, I don't even care about dark mode, but that is very nicely done. I
really like that they care enough to actually implement dark mode all the way
from OS to the browser.

------
TheAceOfHearts
For those that are unaware: Firefox still supports alternative style sheets
[0]. Unfortunately it's pretty well hidden, and I think it's unsupported by
other browsers. One of the things I love about this feature is that it gives
users the choice.

It's a damn shame that CSS System Colors [1] was deprecated. There's also
System font values [2], even if it's barely used. I really like my system
styles and I wish more web services could use similar element sizes and
colors. A few years back using the system font for UI elements started to gain
a bit of popularity [3] [4]. WebKit even added improved support for using
system fonts in web content [5], although I don't know what state that's in. I
understand that exposing more system information can be used for
fingerprinting, but why can't I be the one to decide what information I
expose? You could expose standard color values by default and allow me to
whitelist trusted websites to access real system styles.

I've thought about this a bit, and I wish websites could have different
"modes" which you could switch to. I think it would make it much easier to
develop and design websites that target devices with drastically different
requirements. You usually want a desktop mode which is designed for use with a
keyboard and mouse, and a mobile mode which is designed for use with a touch
interface. The closest thing we have is the "desktop mode" switch on mobile
browsers, but I think that depends on user-agent sniffing which is incredibly
hacky.

I'm typically not a fan of mobile first designs, since it usually leads to a
worse experience for desktop users. Using media queries with viewport size
break points is usually not what you want. For example, sometimes I want to
reference some API docs so I'll resize the window to be incredibly narrow and
place it next to my editor. Tons of websites take this narrow screen size to
mean that I'm on mobile and drastically blow up the size of the text and UI
elements, causing me to lose my position in the document. This is incredibly
frustrating.

Things are improving, though. Now you can use CSS media feature tests to check
if the user has a pointing device [6] and if they can hover over elements [7].
Although I still think designing a website that handles all variations well is
nigh impossible. Even worse, these values cannot be changed by the user! For
example, imagine an advanced image editing app meant for use with a mouse. If
I'm on mobile the browser could let me interface with it by providing a
virtual trackpad. It might not be a great experience, but if the operation I'm
doing is really simple it might be enough.

I think I'd prefer it if you could use a link tag to expose different versions
of the same document, and allow the user to chose which version they prefer.
Aside from providing a desktop and mobile version you could also link to an
API or data view which is designed for easier consumption by computers.
Another neat use for this could be to provide EPUB or PDF links for online
books; you can keep reading the online version or download the full version
for later.

[0] [https://developer.mozilla.org/en-
US/docs/Web/CSS/Alternative...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Alternative_style_sheets)

[1] [https://developer.mozilla.org/en-
US/docs/Web/CSS/color_value...](https://developer.mozilla.org/en-
US/docs/Web/CSS/color_value#System_Colors)

[2] [https://developer.mozilla.org/en-
US/docs/Web/CSS/font#System...](https://developer.mozilla.org/en-
US/docs/Web/CSS/font#System_font_values)

[3] [https://www.smashingmagazine.com/2015/11/using-system-ui-
fon...](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-
practical-guide/)

[4] [https://css-tricks.com/snippets/css/system-font-stack/](https://css-
tricks.com/snippets/css/system-font-stack/)

[5] [https://webkit.org/blog/3709/using-the-system-font-in-web-
co...](https://webkit.org/blog/3709/using-the-system-font-in-web-content/)

[6] [https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/poin...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/pointer)

[7] [https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/hove...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/hover)

------
red-tea
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?

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

~~~
red-tea
No. This is a different thing. The problem is when people haven't coded their
CSS correctly and assume default background is white and then set a non
default foreground of black or something. Those sites will still break for
dark themes even with this API.

In fact, if people actually understood the first C in CSS, this thing wouldn't
even be necessary.

~~~
leppr
Dunno why you're being downvoted. This indeed is a very widespread problem.
Even some Google services (like Google Docs) have it.

~~~
mixmastamyk
It generally happens when the site specifies the forgeround or background
color but not both, leading to very low contrast.

