alt Hacker NewsSafari introduces Adaptive Dark Mode in 27.3
Comments
FYI, light-dark() in CSS is a thing now.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V...
I want the opposite. I suffer from astigmatism, which makes white on black hard to read. I wish Safari could turn dark mode websites into light mode websites.
I use dark mode for everything, so I'm pretty happy about this. Some sites were clearly designed to be light, and forcing dark on them could break the experience, but that's exactly what `color-scheme: light only` is for, and it's good that Safari respects it. Other than that it feels like a win-win to me: great for dark mode users, and for devs not much changes, you just add "light only" if you don't want your site to be affected.
Everyone should checkout Dark Reader extension, it's been doing adaptive dark mode for many years, and it's customisable. It even does light mode too. Using it in Firefox on HN right now!
As a user, I'm really excited about this. There are still so many websites that don't support dark mode.
Having built websites myself, I know how much attention it takes to make sure every page and component looks good in both light and dark mode.
It's not perfect yet. Even in the second demo, you can see that the chart remains white, creating a stark contrast with the rest of the page. But it's a great step toward making dark mode work across the web without requiring every developer to implement it themselves.
Personally I'm excited for this on iOS—I find that reading boring stuff in dark mode at minimum brightness on my phone is easily the most effective way for me to fall asleep (contrary to the blue light/no phones in bed advice). With an OLED screen the amount of light emitted is so much lower than any alternative I've tried. For sites like HN (some threads on HN are pretty boring) that don't have a native dark mode, my solution has been setting up the "Accessibility Shortcut" feature to invert the colors on the screen. Three clicks on the lock button and the page inverts. It works okay, but it requires manual intervention for each site depending on whether it supports dark mode.
Am I still the only one who doesn't use dark mode? My astigmatism can't take it
Why are people now so obsessed with dark modes? 20 years ago it wasn't a thing at all and computers were just as usable, if not more in some regards. If you wanted a "dark mode" you switched to a tty.
Does it go the other way? What if I want light mode on a website that looks dark
This is a good thing.
I added dark mode to my blog a while ago and it was a little trying to do properly.
You can implement a half-assed dark mode yourself by adding the following css.
@media(prefers-color-scheme: dark) {
body {
filter: invert();
}
}
I was looking through 'Dark Mode' browser plugins for viewing websites last week, and the options aren't great. The 'Dark Reader' plugin that's everywhere sends a lot of silent web requests in the background that seems strange given its mostly just CSS tweaks.
Does this also address the momentary flash of blinding white, often when pages transition/fail to render
> When transforming text color, Adaptive Dark Mode aims for sufficient contrast as defined by the WCAG 4.5:1 contrast ratio.
The WCAG 2 contrast checker is known to be inaccurate, specifically for light on dark color combinations (i.e. dark mode) meaning 4.5:1 isn't always going to be easy to read so it's surprising they're not at least using a higher ratio. The APCA contrast checker (was being considered for WCAG 3) is more accurate at measuring readable contrast levels and the docs explain the problems with WCAG 2 more:
https://git.apcacontrast.com/documentation/APCAeasyIntro.htm...
Chrome also has a functional adaptive dark mode (no extension required!), but it is hidden behind an experimental flag `enable-force-dark` as an origin trial on desktop. I am surprised that the Chrome team have not surfaced this to users earlier (outside of Android Chrome, where it is available as a 'Dark Mode' toggle).
To try it, go to chrome://flags and search for Dark Mode, then enable Auto Dark Mode for Web Contents.
Alternatively, you can toggle it on using the Chrome DevTools Rendering tab, as "Enable automatic dark mode"
PSA: Noir is a safari extension that does exactly this and it’s fantastic. Miles better than Dark Reader on performance and refinement. Costs a few bucks but it’s one time and totally worth it.
Finally..
In dark mode, any windows that aren't dark can be huge eyesores.
I recently made a menu bar utility to enable per-window color invert for this reason: https://github.com/pazimzadeh/WindowInvert/
It helps for apps that don't have dark mode yet (Pages, etc) and even some apps that do (Preview has a dark mode, but it doesn't work on old PDF's).
I just wish all websites supported reader mode.
This looks awesome! I especially like that its not detectectable by the page for privacy! I want this in firefox.
Really happy to see this. Users begged me to add dark mode to my sites for years and it's been nothing but a pain to support since adding it. If other browsers pick up something similar, I look forward to the day I can finally remove "manual" dark mode support and just leave it up to the browser.
I wonder when Apple will separate Safari update from iOS update. They have done this for the MacOS.
A pet peeve of mine is websites thinking oh you prefer dark mode so let’s make the background pure black. I cannot take it because the contrast is too much: #fff on #000 is way more uncomfortable than #000 on #fff for me. There are certain developers who continue to think that dark mode is for conserving battery life with an OLED screen so pure black is preferable. I hate that so much that I have turned off dark mode globally. If websites can’t be bothered to implement an actually nice dark theme like Solarized Dark, I’d rather prefer the light mode.
Besides Solarized Dark, GitHub’s Soft Dark theme is quite well done, but unfortunately it’s not the default for a logged-out user with dark mode. So with dark mode I need to log in to GitHub to get acceptable colors.
Now that I think about it, I need a feature to limit the darkness of colors anywhere on the page, background or text except images. Remap #000 to #222 and #fff to #ddd.
I know it's always been this way, but it's weird to me that Apple uses the WebKit blog for Safari product announcements.
If this ends up working anything like the Gmail Dark Mode implementations on iOS and Android that have drove developers insane and users mad, then I expect both parties to become upset. It is easy to view this as a win for users, but the moment this doesn't work well in various scenarios, the vocal minority will punish the developers of the web as if they did something wrong here, and everyone loses.
Here is to hoping that is not the case, and they did a good job with the implementation in Safari, but I have my suspicions.
I fear this will lead to a lot of broken websites. That seems to be the case with a lot of the browser plugins that provide the same functionality.
I've always wanted to use Safari as my default browser. I just need them to fix the disappearing favicons in the sidebar tabs. Apple: please fix.
Hah, I just paid for an addon to do this, Noir. Sure you could do it for free but it's a nice experience. Oh well, no harm done.
This is much better than the absolute embarrassment Mozilla tried with alternate page styles. I swear no one at Mozilla ever tested out the feature considering the style you select does not get persisted so the next time you navigate it reverts back to the original style.
Meanwhile this features is actually tired to a persisted device setting that doesn't get reset every time you go to a new page.
Do they plan to introduce compliance with PWAs any time this decade?
Does this also allow me to lighten sites that default to extremely hard to read dark mode?
I wish the crusade to make everything dark would end.
So do others. https://xkcd.com/3227/
damn
"Websites aren't making dark mode versions! WE'LL DO IT FOR THEM!"
This has to be the result of some passion project by yet another whacko dark mode fanatic (you know who you are). Non-standard, assuredly buggy, and basically a maintenance nightmare. Good luck with that craziness.
Can we have another setting which turns dark websites into actually readable light designs for adults?
[dead]
[dead]
[dead]
> Safari prevents websites from detecting when Adaptive Dark Mode has been applied. JavaScript that queries CSS colors will get the original authored colors, not the transformed ones. Any images drawn into canvas render in their original form.
So… the browser is now intentionally lying now. Ain’t that great.
• As a user: great
• As a web developer: what a nightmare, now your website will look different to different people, as if having to support multiple browser engines and multiple screen rations, and multiple platforms, etc. was not a big pile of problems already.
• As someone who doesn’t like dark-mode due to eye strain: good-good… for people who like it ¯\_(ツ)_/¯
Is this a headline form the year 2015?
For anyone using Zen browser, you can accomplish this on a site by site basis using the newer "Boosts" feature available via the extensions button in the url bar
Personally, I find it close to perfect for Gmail and HN, among others
This is surely going to be optional, so it won't impact me in the slightest, but it is a pet peeve of mine when browsers (or browser extensions, looking at you 1Password) alter the UI of websites away from how they were originally designed without explicit instruction to do so.
This sounds like it meets that threshold, it will just surely be a hit-or-miss mess. Hopefully if it makes it to iOS it will drive more site owners to adapt to `prefers-color-scheme`.
It is truly arrogant of Apple to change a websites presentation, graphics, logos, and then tell website authors if you want to opt out just do XYZ.
But this Apple arrogance is also why they are Apple. And why you are using a software keyboard and a phone shaped like a dark mirror.
Hacker News itself is a prime example of a website that doesn’t support dark mode, but could do so trivially (and, IMO, would look so much better if it did!)