109 comments

[ 5.1 ms ] story [ 42.1 ms ] thread
• 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 ¯\_(ツ)_/¯

Wait until you learn I can change the font size and even override the site CSS on my own machine!
> what a nightmare, now your website will look different to different people

That's what the web has always been. People don't all have the same display types, the same subpixel layouts, the same display sizes, the same DPIs, the same fonts, the same zoom levels... People use reader modes, global restyling extensions, per-site custom style sheets, full screen magnifiers, bounded/partial magnifiers, screen readers, OS high-contrast modes... the web has never been a fixed canvas that you get to paint on and then hand to users.

As a web developer, all you have to do is support `:prefers-color-scheme`.
> 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.

> So… the browser is now intentionally lying now. Ain’t that great.

To the server. I'm 100% behind this. The unholy amount of control websites have over our web browser should go down, not up.

This is more or less unavoidable to avoid breaking poorly-architected front-ends that rely on styling to handle logic.
Browsers already intentionally lie all the time, and have had to for years, because fingerprinting and tracking by various ad networks and bad actors has been rampant.
It's the user's agent
Browsers lie all the time. Browsers also prevent sites from getting the color of a link because visited links can be shown in a different color and this can be used by the site to tell if a user has ever visited a link.

Don’t you love it when browsers lie to websites to enhance the user’s privacy.

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.
Bad: it’s tracking you

Worse: it’s attacking you

Worst: it’s attacking someone else as you

I use stylus on firefox, you can search for styles or write them yourself. I often write dark mode for websites, I'm using a dark mode for hn right now. Also "large mode", it's ridiculous having websites on a 32" limited to 900 px
I'd be curious to know more about this. Dark Reader, at least on Firefox, is a recommended addon, which means it gets additional scrutiny by Mozilla. I do agree though that if it does additional web requests, it seems fishy. Do you have any details on where these requests go to or how you found them?
You can inspect requests yourself by either:

- Checking "Enable remote debugging" and "Enable chrome and add-on debugging toolboxes" in devtools settings, opening Browser Toolbox (Ctrl+Shift+I), and looking at the "Network" tab

or

- Enable add-on debugging and inspect the addon from `about:debugging`

Thank you, whoever led this!
On the contrary, screw you whoever led it. Who even wants authored styles nowadays.
I know it's always been this way, but it's weird to me that Apple uses the WebKit blog for Safari product announcements.
It’s not. The feature is implemented deep within WebKit so it makes sense to be on this blog.

> It’s precisely because Adaptive Dark Mode is happening deep within the WebKit browser engine that we are able to find creative ways to solve the most complex challenges, apply the transformations with great speed and power efficiency

Does it go the other way? What if I want light mode on a website that looks dark
Finally a fix for HN
Please! I don't use Safari so this won't help me, but switching back to HN from other mostly dark themed sites hurts my eyes :(
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.
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();
    }
  }
All your images will be inverted as well, which doesn’t work well for photos.
Please do not use invert; it messes up subpixel rendering, making text ugly and harder to read.
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.
Am I still the only one who doesn't use dark mode? My astigmatism can't take it
I find dark mode is better for astigmatism, personally. It also isn't hellish if you have floaters and migraines, unlike light mode.

The preference, either way, is an important accessibility feature.

No, you’re not the only one, I can’t read dark mode, it’s all blurry, makes me squint and gives me a headache. Light mode all day long.
No, After a few minutes of dark mode, I get essentially zebra stripe like migraines.
No. It’s stupid. There’s a reason we don’t write white text on black paper. There’s a reason the first Mac showing black text on a white background was such an improvement.

I don’t get the point at all (and don’t want to hear it, I’ve seen the arguments before).

It’s nice it’s there for people who want it but it baffles me it’s constantly treated like the greatest thing ever.

> There’s a reason we don’t write white text on black paper.

Because wood is bright and you can’t really print white ink on a black paper?

There might be a usability advantage but using black ink on white paper doesn’t really prove that, that’s just the easier option of the two possible choices.

I use light mode in the day when it’s bright, and dark mode at night when it’s dark. Neither mode is “better” for me, but two things are true for me:

- Dark mode is harder to read when it’s bright out

- Light mode is blindingly bright when I’m in a dark room (and turning the brightness sufficiently low makes everything look washed out.)

My devices change from light mode to dark mode at sunset and it’s basically ideal.

Also it’s nice to just have less artificial light as the sun sets, which makes falling asleep naturally a bit easier.

And `:prefers-color-scheme` has been supported by all major browsers for seven years.
Windows 3 through windows 7 had pervasive support for dark mode as long as application developers didn't custom paint their user interfaces. Application developers started out almost all supporting system colors and gradually over the next 25 years or so started implementing their own custom-drawn interfaces, accelerated by embedded IE/mshtml views and then later even more by Electron. This concluded with practically zero interfaces supporting the system color scheme.
Yeah, when dark mode became "a thing" my first reaction was "...didn't we have this already?"
Yeah but "dark mode" for Win3 through WinXP was primarily to support passive matrix LCDs, which required inverted color schemes to appear with enough contrast to read. That is why the built-in "high contrast" color schemes look so aggressively awful.
Custom painting isn't the only thing that broke it. You can customize the style (colors) of the native widgets to get a desired look but IIRC you could choose from system colors (follows the theme/mode automatically) or exact colors. Some applications used a mix of them which made the UI look awful if you switched away from whatever the default theme was.
(comment deleted)
It makes me so angry that they named the CSS function `light-dark` instead of leaving the door open to allowing generic user- or site-specified color schemes. I mean it was right there in all the other mechanisms around this feature, they just had to read and think about why these are structured the way they are, and why "light" and "dark" were always values and not keywords in all of these..:

    - <meta name="color-scheme" content="light dark">
    
    - :root { color-scheme: light dark }

    - @media (prefers-color-scheme: dark) { }

    - <picture><source media="(prefers-color-scheme: dark)">
.... and then we've got `light-dark()`, the goofy looking dragon hanging out to the side of these majestic, forward-thinking parts of the specification.

Did they not look at the prior art and notice that "one of these things is not like the other?" All the other pieces of this puzzle, conceivably, could have one day had something like `:root { color-scheme: halloween }` or `@media (prefers-color-scheme: supercontrast)` but no, we're just going to cement `light-dark()` as the only two possible color schemes we'd ever want to switch between forever.

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 have similar issue with dark mode applied to content - hurts my eyes. I prefer to have window chrome in dark, to make "fade away". The only application which allows me to have my cake and eat it is Firefox: I can run Windows in dark yet read web in light mode.

I wish Windows would steal this feature for the whole OS: I don't want Notepad to use dark for text, but per-app setting usually turns the whole app light.

I have 20/20 but for some reason cannot handle dark mode except for two things, terminal and coding and I cannot do light mode for either of those.

But whether it is my os ui or my phone ui, I feel like I can't distinguish borders and boundaries in the UI as well as I can with light mode.

take the wikipedia, no more flashbangs for me HA!
Wikipedia allows you to write any custom CSS. In 2012/2013 when Facebook IPO’ed and was the cool thing I made a user CSS that made Wikipedia look like Facebook.
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 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.
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`.

I and my browser are allowed to do whatever I want with the data that is posted on the public internet.
"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?

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/

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!
Slows down loading of websites a lot though.
A slowly loading website is preferable to a quick flashbang.
I just noticed that Dark Reader stopped working for me. Turns out I accidentally installed "Dark Mode", a potentially malicious clone that got blocked :/
I like that on Chrome, and while it works on Safari, I prefer Noir there.
I'm concerned that these extensions can "read and modify" everything. I can't use that for work.
AFAIK, its detectable by the web page though
Dark Reader went political - that's an automatic "NO" from me