YHK - yet another hacker news clone

Safari introduces Adaptive Dark Mode in 27.3

175 points paddingtone 1 hour ago 113 comments

guessmyname 1 hour ago | parent

• 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 ¯\_(ツ)_/¯

vulcan01 1 hour ago | parent

Re: web developer

> The HTML <meta name="color-scheme" content="light only"> tag lets browsers know that 1) this page supports light mode and 2) should only be displayed in light mode.

Spivak 1 hour ago | parent

Even as a developer I'm all for it, go even harder. We may eventually reach the promised land where the user agent defines so much of the final appearance things like "pixel perfect design" or beating standard controls into within an inch of their lives to fit some design system are a thing of the past.

mortenjorck 1 hour ago | parent

I like to think of it as a gentle encouragement to finally implement prefers-color-scheme in web applications.

(I say this as a designer who has spent countless hours on dark-mode palettes as well as someone who has the automatic circadian toggle enabled everywhere.)

apsurd 1 hour ago | parent

disagree. the web specifically is built as a dynamic medium for consumption. The fluid nature is the point. Yes, it is harder for developers to force a consistent experience, but as a professional web dev, we should not treat the web as a fixed medium.

cluckindan 1 hour ago | parent

As long as a client needs to approve a layout, that is not happening

Telaneo 1 hour ago | parent

Sounds like a problem with the client.

cluckindan 1 hour ago | parent

A web agency is not going to start questioning the brand book of a 100x larger client.

Telaneo 12 minutes ago | parent

I'm not going to publically question my boss doing stupid shit, but that doesn't make him not stupid.

threetonesun 1 hour ago | parent

Wait until you learn I can change the font size and even override the site CSS on my own machine!

isityettime 1 hour ago | parent

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

kps 59 minutes ago | parent

As a web developer, all you have to do is support `:prefers-color-scheme`.

_boffin_ 1 hour ago | parent

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

kvuj 1 hour ago | parent

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

giancarlostoro 1 hour ago | parent

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

Especially when so many lack reasonable ADA compliance.

mortenjorck 1 hour ago | parent

This is more or less unavoidable to avoid breaking poorly-architected front-ends that rely on styling to handle logic.

neilalexander 1 hour ago | parent

One less thing to fingerprint.

mirashii 1 hour ago | parent

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.

morsch 1 hour ago | parent

It's the user's agent

kccqzy 1 hour ago | parent

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.

jordand 1 hour ago | parent

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.

cluckindan 1 hour ago | parent

Bad: it’s tracking you

Worse: it’s attacking you

Worst: it’s attacking someone else as you

DuncanCoffee 1 hour ago | parent

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

figmert 1 hour ago | parent

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?

pamcake 41 minutes ago | parent

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`

inshard 1 hour ago | parent

Thank you, whoever led this!

cluckindan 1 hour ago | parent

On the contrary, screw you whoever led it. Who even wants authored styles nowadays.

arcanemachiner 1 hour ago | parent

"Authored"? It just applies a set of rules to the existing stylesheet. It's not like they're customizing it for different websites.

bla3 1 hour ago | parent

I know it's always been this way, but it's weird to me that Apple uses the WebKit blog for Safari product announcements.

kccqzy 17 minutes ago | parent

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

hahnchen 1 hour ago | parent

Does it go the other way? What if I want light mode on a website that looks dark

kps 1 hour ago | parent

You're out of luck if, like me, you have a problem with astigmatic halation. All the cool kids use dark mode.

iOS since 26 has been presenting parts of the system in dark mode despite having the device set to light only. One of the ‘best’ is that launcher groups switch to dark background, but they forgot to switch the text colour, so app names are unreadable. I had hoped iOS 27 would fix it, but no, so I'm switching to Android.

I_am_tiberius 1 hour ago | parent

Is this a headline form the year 2015?

reader9274 1 hour ago | parent

Finally a fix for HN

kkotak 1 hour ago | parent

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 :(

Transcendium 1 hour ago | parent

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.

arcanemachiner 1 hour ago | parent

There's a mode like this in an Android Chrome fork called Cromite that works surprisingly well. Most of the other options do suck though.

kevincox 1 hour ago | parent

1. It's opt-in. The user is choosing the occasional broken site over light themes.

2. The site can always provide their own dark theme if the automatic one is broken.

AndrewStephens 1 hour ago | parent

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.

madeofpalk 1 hour ago | parent

   filter: invert() hue-rotate(180deg)
For images. Works better for illustrations to get the vibe of the original colours than actual photographs.

sheept 1 hour ago | parent

The opt outs mentioned in the article, like

    color-scheme: light dark;
should be sufficient to enable dark mode for users who prefer dark mode.

For icons, ideally they’d be SVGs controlled by currentColor, but that may not be feasible or convenient depending on your setup.

grounder 1 hour ago | parent

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.

JulianPaul 1 hour ago | parent

Am I still the only one who doesn't use dark mode? My astigmatism can't take it

madeofpalk 1 hour ago | parent

No.

isityettime 1 hour ago | parent

Is your astigmatism uncorrectable?

sheept 1 hour ago | parent

Even if it were, it’s easier and more reasonable to fix your app to work with your users, than fixing your users to work with your app.

kps 1 hour ago | parent

Not them, but my left eye isn't fully correctable. The average dark mode site looks like I'm driving the Las Vegas strip in the rain.

figmert 1 hour ago | parent

For me I cannot deal with dark mode in bright environments, but equally it's fairly hard (though less hard) when using light mode in dark environments. It's why Dark Reader has been such a huge quality of life improvement for me.

redwall_hp 56 minutes ago | parent

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.

loloquwowndueo 52 minutes ago | parent

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 colors all day long. Light mode is not a mode - it’s the default.

nozzlegear 42 minutes ago | parent

I don't use it either, and find most website dark modes really difficult to read. The text blurs together or worse, it gets "burned in" to my vision briefly (not sure what that phenomenon is called). I especially dislike the ones that are pitch black instead of the cool grey/dark grey. I was hoping this "Adaptive Dark Mode" announcement was going to adaptively do away with the pitch black dark modes that make it impossible for me to read a website by adapting them to any other color scheme. =P

wiredfool 33 minutes ago | parent

No, After a few minutes of dark mode, I get essentially zebra stripe like migraines.

kickingvegas 1 hour ago | parent

FYI, light-dark() in CSS is a thing now.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V...

kps 1 hour ago | parent

And `:prefers-color-scheme` has been supported by all major browsers for seven years.

jansan 1 hour ago | parent

And broken in Chrome since the beginning:

https://issues.chromium.org/issues/366412383

kulahan 55 minutes ago | parent

So I guess it hasn’t been supported anywhere in a sense.

Safari and Firefox are pretty small.

zamadatix 49 minutes ago | parent

I wouldn't call this part of the situation a bug. I'm sure everyone has their own opinion about which is the "right" way to handle a mismatch of OS level preference and browser level theme though.

The underlying problem is Chrome exposes no (normal) setting to override the OS level setting at all, not necessarily that the preference shall always follow the browser's theme specifically.

omer_balyali 44 minutes ago | parent

This issue is related to appearance setting inside Chrome itself (which sets Chrome's appearance, not how it should work with websites AFAIK). The core feature of prefers-color-scheme (following the OS-level setting) is working as intended.

jansan 23 minutes ago | parent

It is not true that prefers-color-scheme should always follow the OS-level setting. The doc says "The method by which the user expresses their preference can vary. It might be a system-wide setting exposed by the Operating System, or a setting controlled by the user agent."[1]

So if the user sets dark mode in the browser, do they not explicitly express their preference for websites? How could they be more explicit about the setting?

[1]https://drafts.csswg.org/mediaqueries-5/#prefers-color-schem...

cosmotic 51 minutes ago | parent

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.

toyg 7 minutes ago | parent

Yeah, when dark mode became "a thing" my first reaction was "...didn't we have this already?"

I was a theme junkie back in Windows 98 times, but stopped bothering since it became increasingly clear that Microsoft was not really interested in supporting them after XP.

da_chicken 3 minutes ago | parent

Yeah but "dark mode" for Win3 through WinXP was primarily to support passive matrix LCDs, which required inverted color schemes to appear black-on-white. That is why the built-in "high contrast" color schemes look so aggressively awful.

akersten 34 minutes ago | parent

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.

have_faith 22 minutes ago | parent

It’s always irked me that light and dark are given privileged positions in the namespace. They’re just themes (or schemes if you like), like all the other possible themes.

nsoam 1 hour ago | parent

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.

roflchoppa 1 hour ago | parent

take the wikipedia, no more flashbangs for me HA!

sheept 1 hour ago | parent

Wikipedia already supports dark mode as a feature of the default Vector 2022 skin.[0]

[0]: https://en.wikipedia.org/wiki/Wikipedia:Dark_mode

roflchoppa 12 minutes ago | parent

I guess this time suffering was really a choice :(

kccqzy 13 minutes ago | parent

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.

vinnymac 1 hour ago | parent

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.

aaomidi 1 hour ago | parent

>will punish the developers of the web as if they did something wrong here

Yes, developers can solve this by simply implementing dark mode.

vinnymac 1 hour ago | parent

Your imagination for what can go wrong seems limited in my eyes. I've been in the trenches where a specification was not followed, or was wrong from the beginning. That can be the case here.

marcellosso 1 hour ago | parent

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.

joshuat 1 hour ago | parent

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

JoshTriplett 1 hour ago | parent

Browsers are user-agents, not website-agents. By way of example, if a website shows ads or does tracking, I will absolutely alter it to my liking.

wpm 44 minutes ago | parent

I and my browser are allowed to do whatever I want with the data that is posted on the public internet.

russellbeattie 1 hour ago | parent

"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?

cyanydeez 1 hour ago | parent

Do they plan to introduce compliance with PWAs any time this decade?

nouman0x45 1 hour ago | parent

damn

loloquwowndueo 59 minutes ago | parent

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/

greazy 55 minutes ago | parent

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!

ckdot 45 minutes ago | parent

Slows down loading of websites a lot though.

Telaneo 5 minutes ago | parent

A slowly loading website is preferable to a quick flashbang.

lnvdpwl 43 minutes ago | parent

I just noticed that Dark Reader stopped working for me. Turns out I accidentally installed "Dark Mode", a potentially malicious clone that got blocked :/

tehnub 38 minutes ago | parent

I like that on Chrome, and while it works on Safari, I prefer Noir there.

Reason077 54 minutes ago | parent

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!)

loloquwowndueo 53 minutes ago | parent

Please no. Dark mode is extremely difficult to read for me.

simonjgreen 50 minutes ago | parent

Are you supposing they would they force it on for you? Or does your dislike of it mean nobody else should have the option?

dmd 5 minutes ago | parent

This is, in fact, what drives a lot of politics. "I don't like X therefore nobody may have X."

peregren 50 minutes ago | parent

That’s why it’s a mode :-)

davidhs 34 minutes ago | parent

I'd prefer dark mode because then I notice my eye floaters much less when reading.

therealmarv 33 minutes ago | parent

there are a lot of design choices which Hacker News does not support ;)

quantumink 27 minutes ago | parent

My HN is in dark mode, though the honors for that accomplishment go to the duckduck browser. Been reading HN on dark mode a while now (light mode burns me eyes, only way to use HN for me now is with the Duck)

P.S. the Duck browser literally has a universal dark mode setting, I don't recall a site it wasn't able to dark-force darkify for me (language is fun)

ivanjermakov 22 minutes ago | parent

There is no downside to having prefers-color-scheme media query set up, even for HN. Too bad still roughly 1 in 4 popular websites support it.

altairprime 15 minutes ago | parent

They’re now formally interested in doing one but, I imagine, not very urgently relative to flag reasons and other stuff.

drusepth 54 minutes ago | parent

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.

pamcake 47 minutes ago | parent

> I look forward to the day I can finally remove "manual" dark mode support and just leave it up to the browser.

Today it is!

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V...

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...

saagarjha 43 minutes ago | parent

I guess if you truly don’t care about it sure, this is probably going to be an improvement, but if you are willing to invest even a bit of effort I strongly think you’d want to decide how your website looks like in dark mode.

drusepth 21 minutes ago | parent

I'd estimate I've probably spent 100+ hours testing and fixing dark mode issues over the past 5-10 years. Investing "a little bit of effort" is how I got myself into the trap of doubling+ UI QA time to make sure everything _also_ looks good in dark mode (and also in dark mode across a matrix of other configurations) every time I want to ship anything new to users.

I know some people care about dark mode (and that's why I bit the bullet to add it), but I'd honestly much rather have spent all that time working on actual features.

charcircuit 51 minutes ago | parent

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.

pazimzadeh 49 minutes ago | parent

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

senderista 46 minutes ago | parent

I just wish all websites supported reader mode.

speedping 37 minutes ago | parent

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.

hendersoon 35 minutes ago | parent

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.

macNchz 34 minutes ago | parent

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.

famfamfam 24 minutes ago | parent

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"

arccy 21 minutes ago | parent

Some pages break badly... like google docs and some QR codes

prh8 15 minutes ago | parent

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

seanwilson 12 minutes ago | parent

> 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) so 4.5:1 isn't always going to be easy to read. The APCA contrast checker was being considered for WCAG 3 that corrects for flaws like this:

https://git.apcacontrast.com/documentation/APCAeasyIntro.htm...

accidc 9 minutes ago | parent

Does this also address the momentary flash of blinding white, often when pages transition/fail to render

drfloyd51 6 minutes ago | parent

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.