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.
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.
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.
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.
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).
I was reading in iBooks the other day and it changed the content to be in dark mode as well. I didn't find it jarring, but it is simply text so I was okay with it.
If I was on a website/app though, I think I'd prefer an option provided by the site/app rather than having the OS dictate what happens.
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?
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.
In the color preferences, set "Override the colors specified by the page with your selections above" to "Always". By default Firefox does this automatically when the OS is in high contrast mode.
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.
Also while it's very cool that they support this in Safari, I highly doubt someone will do CSS adjustments JUST for Safari users like this. Either your page already has a dark theme or you won't really bother about this.
Also on Linux GNOME has had a popular dark mode for its default theme (Adwaita) for ages now, and KDE has a bundled dark theme bundled by default (IIRC, haven’t used KDE in ages).
I think Android has this option too?
Basically, it’s not just a “macOS thing”, lots of systems now have dark modes.
If you can justify dozens of CSS adjustments for IE11, it isn't much of a stretch to spend half that amount of time making something cool for (typically) higher value Safari users as well.
What do you mean by "higher value"? Getting IE11 to work will net you an extra 2.85% of the market, but adding a very minor feature that's only usable by Safari users doesn't seem to be profitable at all.
I'd assume this is intended for web pages/apps to allow their in-page controls/navigation to fade into the background, revealing the content.
E.g. in a crud app with top/side nav, and then a form in the main section, the nav bars can be rendered as pale/dark to suit the user selection, while the main content area retains the focus.
Just personally don't want to read 2,000+ word articles of white text on a dark background just because I like the browser UI to be dark. Others might, though — hopefully browsers will offer a setting for dark mode independent of the OS-level setting.
I think it'll be a while before most sites even consider adopting this (it's not even listed to check support on caniuse.com), and even if it does become widespread, reader mode has style-override controls to make the page more suitable for long-form reading just as it does now.
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.
I found that black background with white text is great when you have perfect eyesight but once your eyesight starts to go and you start needing glasses white background with black text is easier to read.
it's quite odd. It could be just a personal thing though.
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.
That I agree with, and this "responsibility" ultimately falls on the webmaster/content provider to allow a dark theme in a method similar to this post...
>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).
This is why I think they should focus on exposing the dark mode setting in Javascript instead of CSS.
Sites that support dark mode should (and will almost always) have a toggle for it. It'd be better if this setting helped _inform_ the default initial state rather than _forcing_ a choice on you. To me, that's a lot easier done with a Javascript API than CSS.
You have all the choice in the world. Use whatever tech you want (browser js, server side templating, client side xslt, etc) to have an attribute on the body element indicating opt-in status, and use that in your media query to target only the users who want it.
With the css solution it’s doable on a site that has no javascript.
The right place for the switch in this case is the browser. The browser should have a button for light/dark/system, defaulting to system. And CSS should follow that.
JS should not be involved, and we don't need every site to have its own version of the switch, located in a different place and looking different.
You don't need Javascript to implement a switch that changes from light mode to dark mode. That can be easily done in CSS. I've done it on web sites to switch to a high-contrast color scheme for people with vision difficulties.
It's really a matter of preference. I personally would be happy if my PDFs would automatically display in "dark mode" (not that I expect that to be implemented). Perhaps browsers just need a setting to toggle this.
On Linux I use MuPDF which can also invert. (Although this isn't really "dark mode", since most PDF documents are black text on white, it gets the job done.)
Don't you use websites that have a dark theme more instead. I always preferred websites that allowed me to select a dark theme and it seems to be more and more popular to do that.
Why not? I have a chrome extension to darken and/or invert webpages and PDFs, and I have SumatraPDF setup white text on black background for editing LaTeX?
It is nice to have the option of map pdf colors to correspond to one's color theme.
I like to read pdfs in emacs alongside my notes, and I am very pleased that emacs' pdf-tools allows me to map colors as I choose (kind of - there are only two colors, foreground and background).
> But I don't think it's safe to assume that someone who sets a dark UI also wants web pages displayed like that.
If it's done well, absolutely it's safe to assume.
I am extremely excited to research and start using this feature. I don't want to force anyone to use dark UIs that don't want them, but simultaneously I can't bring myself to make more light-themed apps and pages when I want exclusively dark themes for everything that runs on my machine.
"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 don't think it's safe to assume they don't. I can't stand web pages in general that are white background/black text.
I've coded in black background / white (or coloured) text for about two decades now, and I'm so glad Apple is making the dark theme a standard at this point. There's literally thousands of articles about the eye strain that's caused from the poor decision to present information this way. We don't need literally at this point millions of photons screaming light at our faces at more than 300 nits every moment.
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.
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... . Ideally sites would also work properly if the user changes the foreground and background colours to suit their needs.
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.
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.
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... I'm really liking it, and I'd be interested to hear about something similar for Firefox.
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.
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.
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.
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.
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.
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:
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..
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.
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.
Actually Mac OS was always pretty restrictive in what you could customize - in some ways they've actually doubled the number of choices you now have :)
Yea and this is purely driven by Apple needs. For e.g on Apple the UI is desturated so dark mode just means go darker. But for e.g on Linux with Arc theme, dark theme has a blueish tint, so the website using dark theme will look bad on Arc theme desktop.
We should at least add the option hue & saturation to light/dark setting. Then the app/website would at least fit color-wise with the theme of the OS. But only dark/light is assuming all themes are desaturated which is true for Apple but not necessarily for other platforms
127 comments
[ 2.7 ms ] story [ 186 ms ] threadAnother 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.
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.
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
I think navigation bars (either for regular sites or functional web apps) are good candidates for honouring this setting.
If I was on a website/app though, I think I'd prefer an option provided by the site/app rather than having the OS dictate what happens.
In fact, if people actually understood the first C in CSS, this thing wouldn't even be necessary.
In the color preferences, set "Override the colors specified by the page with your selections above" to "Always". By default Firefox does this automatically when the OS is in high contrast mode.
Unfortunately it doesn't work in Chrome or Firefox yet, as they haven't implemented proper APIs.
Edit:
Ok, I've just noticed that
a) the app I have now (or maybe always?) has a couple of different levels "softer dark mode" is much nicer - it's not pure black for backgrounds.
b) using it more selectively (i.e. not just on/off for all sites) seems to work much better than just turning it on open-slather.
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/
I think Android has this option too?
Basically, it’s not just a “macOS thing”, lots of systems now have dark modes.
Why is that? According to [1] Safari has 14% market share. Just the desktop version has 5%.
[1] http://gs.statcounter.com/browser-market-share
But that is assuming the content is aimed at this group.
E.g. in a crud app with top/side nav, and then a form in the main section, the nav bars can be rendered as pale/dark to suit the user selection, while the main content area retains the focus.
Just personally don't want to read 2,000+ word articles of white text on a dark background just because I like the browser UI to be dark. Others might, though — hopefully browsers will offer a setting for dark mode independent of the OS-level setting.
To me black on white is just a hangover from old skeuomorphic design principles.
it's quite odd. It could be just a personal thing though.
The bigger factor seems to be environment you are currently in:
- Fluorescent operating room/accountant's office/Initech --> white backgrounds needed.
- Darkened lab/color-correct studio/night-time --> dark backgrounds.
And of course this has gotten worse over the years as control over the gui theme has been lost.
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.
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).
https://darkreader.org/
https://www.gofake1.net/projects/nightlight.html
Sites that support dark mode should (and will almost always) have a toggle for it. It'd be better if this setting helped _inform_ the default initial state rather than _forcing_ a choice on you. To me, that's a lot easier done with a Javascript API than CSS.
With the css solution it’s doable on a site that has no javascript.
JS should not be involved, and we don't need every site to have its own version of the switch, located in a different place and looking different.
Dark Mode should only be for UI elements not for actual content. They would never do that with a PDF either.
Hell even you-tube does that now.
I still would prefer to change a setting once, rather than establish a profile on every website to enable a dark theme.
I like to read pdfs in emacs alongside my notes, and I am very pleased that emacs' pdf-tools allows me to map colors as I choose (kind of - there are only two colors, foreground and background).
If it's done well, absolutely it's safe to assume.
I am extremely excited to research and start using this feature. I don't want to force anyone to use dark UIs that don't want them, but simultaneously I can't bring myself to make more light-themed apps and pages when I want exclusively dark themes for everything that runs on my machine.
I don't think it's safe to assume they don't. I can't stand web pages in general that are white background/black text.
I've coded in black background / white (or coloured) text for about two decades now, and I'm so glad Apple is making the dark theme a standard at this point. There's literally thousands of articles about the eye strain that's caused from the poor decision to present information this way. We don't need literally at this point millions of photons screaming light at our faces at more than 300 nits every moment.
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
[2] https://msdn.microsoft.com/library/Hh771830
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.
I tried to make websites look like native apps with these, haha.
Will it be possible to figure out the appearance preference with JacaScript as well?
https://addons.mozilla.org/en-US/firefox/addon/darkreader/
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.
I've been using https://addons.mozilla.org/en-US/firefox/addon/dark-night-mo... 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
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.
Obviously there are some things that aren't yet anonymized in Safari 12, but it's good enough.
Of course, on iOS, I don’t have a choice.
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://darkreader.org/
In a darkened studio environment, one of these is a must.
Revert Back