HACKER Q&A
📣 habosa

How did dark mode win?


In the past 2-3 years basically every major, modern piece of software I use has added dark mode. Everything from macOS to the Google Maps app has added a dark mode, and many websites have a toggle as well. GitHub has added like 3 different dark modes!

If you've ever worked on a mobile app or website before you know that going from one theme (light mode) to two themes (light / dark) is a huge task. You have to make all the colors in your app super generic. And it's even harder than that, because you can't just switch colors one-for-one. In a well-designed dark mode you have to rethink a lot of UI concepts (mostly around light, shadow, and contrast) in order to make things look nice.

I am not opposed to dark mode at all, I think it often looks nice, but as someone who has spent some time in big companies I am really shocked at the level of engineering resources that have been spent on this relatively frivolous feature. Most engineering teams have a huge backlog of features/bugs to fix. Dark mode has somehow made the top of the stack.

So I'm asking HN. Have you worked on a major app that added dark mode? Who within your organization pushed to prioritize it? How much time did it take and was it harder/easier than you expected?


  👤 jml7c5 Accepted Answer ✓
I think you're underestimating just how much some people like dark mode; people have been clamoring for it for a long time. Be it for aesthetics, for power saving on OLED screens (a big factor that drove early per-app toggles on Android), and for comfort if light UIs are painful. Once it became a common system-wide option and developers didn't have to create inconsistent per-application toggles, it was a feature that users expected everywhere.

2016-08-08: Windows 10 Anniversary update includes system-wide dark mode option.

2018-06-04: W3C issue created for light/dark mode via CSS: https://github.com/w3c/csswg-drafts/issues/2735

2018-09-24: MacOS 10.14 (Mojave) includes system-wide dark mode option. Safari tech preview adds the CSS media query `prefers-color-scheme`.

2019: All major browsers implement `prefers-color-scheme`.

Et voilà, dark mode everywhere.

Personally, I'm more interested in high-contrast modes. (Available in CSS via the experimental but widely implemented `prefers-contrast` media query. Web devs, support it today! Make life easier for those of us who struggle when forced to stray from good ol' #FFFFFF and #000000.)


👤 Barrin92
Because people have gotten used to using their devices at night and in badly lit rooms. I think it's one of the worst design trends in recent times with negative effects:

"[...]To summarize, a dark-on-light (positive polarity) display like a Mac in Light Mode provides better performance in focusing of the eye, identifying letters, transcribing letters, text comprehension, reading speed, and proofreading performance, and at least some older studies suggest that using a positive polarity display results in less visual fatigue and increased visual comfort. The benefits apply to both the young and the old"

https://tidbits.com/2019/05/31/the-dark-side-of-dark-mode/


👤 Tarucho
Dark mode won because nowadays it´s associated with "new".

When I started coding in the 90s dark mode was associated with old. "Cobol dinos" used dark modes, we "cool kids" used light modes. Nowadays if you ask most young programmers they will say that light mode is old. They use dark mode.

And I guess this idea of hip, has turned mainstream lately. The latest uses "dark"


👤 tailspin2019
It doesn’t really feel like it has “won”. Lighter themes are still overwhelmingly the default option (and sometimes the only option).

I can’t think of any app or website where dark mode has been added as a “forced” choice. The addition of a dark mode is almost always implemented as an optional feature and you can generally choose your preference.

So from a user’s point of view, I can only see this as a positive addition. For those of us who prefer dark mode, for a variety of reasons, we enjoy having the choice. For those who prefer lighter themes, nothing really is being taken away.

The more interesting question to me is why this topic evokes such strong emotions with one side stating often in very strong terms how “wrong” the other side is!


👤 Koshkin
When the screens were tiny by today's standards (like the screen in the original Macintosh), black-on-white kind of made sense. But with the large screens too much white hurts the eyes.

👤 jfengel
Google Maps is one case where I don't think it's frivolous. It's often used as an in-car guidance app, and driving at night you really do want more than just turning down the brightness.

That's a solution that seems to work for every other app I use, and the phone does it for me. I try to avoid custom modes of anything as much as I can. I prefer the default-case experience, which is usually the best optimized and least likely to get me into a situation I can't get out of.

The impression I get is that developers are noisy about it, and since they're the ones in the room, their voices get heard. Other users who want different forms of accessibility don't attract as much attention and so it's not top of anybody's backlog.


👤 syntheweave
Dark mode has a strong preference among some computer users because it works better in dark "computing caves" with low ambient light; when you consider that older screens were relatively dimmer and had severe glare issues, the computer cave was itself a sensible way to do computing. I know I was all about dark mode 15 years ago or so with my first LCD monitor.

But it's also primarily a young person's thing to be able to stay in the cave. Older people are more often put in a position where strong ambient light is assumed, either because of job/household environment or because their eyesight starts to prefer it.


👤 StewardMcOy
To answer the question of who within an organization pushed to prioritize it: Users, lots of them.

I've worked on few big apps and sites that needed to adopt dark mode, and even before browsers and operating systems implemented preferences for dark mode, it wasn't an uncommon feature request from users to completely redesign the apps/sites to be dark, even if that meant replacing the light color scheme. Once browsers implemented prefers-color-scheme, we got lots of requests every day months until we implemented dark mode. Project managers had to prioritize it because it was in such demand.

There's lots of research that dark text on a light background is easier to read, but I suspect it differs by individual. I've always had a much easier time with light text on a dark background. Light tends to bleed at the edges for me, so light backgrounds make dark text look thin, while dark backgrounds make light text look bold, much easier to recognize. From reading a lot of the user requests, I'm not alone. For various reasons, lots of people have an easier time reading light-on-dark.

An interesting related question for me is, when did dark modes start becoming so unusual? Sure, they were never universal, but there were quite a few sites in the late 1990s that would have a dark mode link that would set a cookie that would swap out the CSS for dark mode. There were even a few sites that would flip over to dark mode at night. It wasn't used for large corporate sites, but there were also apps that allowed user skinning, and I suspect dark mode sites started to disappear around the same time app skinning did.


👤 Karawebnetwork
It's become easier to implement them.

Now that many people moved their CSS into JS and that components are more standalone, you can simply flip a flag and use another color palette.

Take this React pseudocode as an example.

Before, you would have to handle it manually. "html.dark-theme .menu .menu-item .menu-link {color: white; background: black;}" ... for every single style declaration.

Sure, preprocessors made them easier in the way that you could simply do ".dark-theme & {}" which would generate the style declarations for you. But it was still a bit of a pain and required using things like mixins that add an extra layer of complexity and support.

Now, your React component can simply be myAwesomeComponent: { titleColor: theme.text, cardBackground: theme.highlight, cssOverrides: css`border:1px solid ${theme.borderColor};` }

Then you have something somewhere that just flip the theme.

const darkTheme = {text:"#fff", highlight:"#000", borderColor: "#ccc"};

mySuperCoolApp.setCurrentTheme(darkTheme);

This makes adding a bunch of themes an afterthought. On an internal app that I worked on, I made a bunch of themes as easter eggs. All that was needed was to duplicate the theme declarations and change the colors. So some users could decide to use different colors.

Another point is that accessibility is becoming more mandatory than before. If you are required by law to support multiple font-sizes, you might as well make it so that you can support multiple colors. It allows things like high-contrast accessibility themes and you can throw in a few extra fun ones just to make your app stand out.


👤 moasda
I have never understood why companies spend so much effort to maintain two themes in their web apps or mobile apps. At least for developers I finally found a good explanation:

Why do developers prefer the dark theme? Because the light attracts bugs.


👤 jrootabega
I think a lot of it was just young, trendy counterculture that followed the shift in tech demographics in the last few decades. Sublime Text was hot and it was dark. Another thing that helped it along was the fact that when your eyes adjust to a dark mode app, context switching to a "light mode" app is painful on the eyes. So people reinforced the idea that "light mode" hurts, rather than that switching hurts.

👤 onlywicked
Dark mode started to become popular after phones started to use OLED screens.

To save battery and burning issues.


👤 bitxbitxbitcoin
I always thought it was because dark mode is generally better on the phone battery.

👤 KolenCh
The trend kick started when the iPhone X has a OLED screen, and people start mentioning you can save a lot of power by turning on “invert color” switch. And then gradually apps are adding dark mode as a kind of differentiation factor. Gradually this spread to desktop (perhaps because macOS starts to offer it systemwide) and recently to the web too (I notice now I browse something like GitHub and it will follow OS setting to turn to dark mode, where I set it to sync with the sun.)

👤 mikewarot
As you get older, your corneas will begin to blur light into dark areas, at that point it is almost impossible to read black text on a white screen.

Dark mode makes it possible to see far smaller things than you can see otherwise. This is particularly important on phones with their tiny screens, or when doing things with lots of details, no matter how big the display.

The default used to be light text on a dark window, for decades before the Mac and Windows came along. There were many reasons for it besides avoiding screen burn.


👤 treeman79
Often have severe migraines. When it’s coming on Dark mode is sometimes the difference between major or mild. Night shift helps some.s

Fl-41 glasses work much better, but I often don’t have them handy.


👤 rhizome
I'll suggest two things: the idea, however misguided, of saving battery power on cellphones, and Quake II. Before dark mode became Dark Mode, gray type on black was a popular enough design aesthetic to inform the more functional implementations later on. Batteries have been insufficient for the entire smart phone era.

👤 jamil7
One problem is once every other app is supporting it, it's hard not too, especially on mobile. I'm working on an iOS app at the moment in which it was decided to defer doing dark mode - every time I switch into it on my phone in dark mode it feels really out of place and noticeable.

👤 bananamerica
I always liked darker things, even outside computers. Whenever I can make something darker, I do it. Feels much comfortable to the eyes. Bit I'm pretty sure light UIs are still the most popular. Maybe not in certain crowds, but for the general public, I think light UI is king.

👤 silicaroach
I have astigmatism and dark mode is a nightmare for any length of time. I'm not a fan.

👤 caseyf7
Dark mode hasn’t won until it is offered by Hacker News and The New York Times

👤 aught
I get headaches and light themes feel like someone is stabbing me in the eyes. Dimming, dark themes etc are sometimes still too bright. Even when I don’t have a headache I still prefer a dark or gray mode.

👤 perilunar
It’s a tribute to Leonard Cohen

https://en.wikipedia.org/wiki/You_Want_It_Darker


👤 andrewf
The big companies were going to be launching redesigns anyway - as institutions, they're not equipped to "don't fix what isn't broken."

👤 donkarma
i struggle when reading pages that only have dark theme as it hurts my eyes which is really annoying, glad firefox has reader mode

👤 sigstoat
it’s especially fascinating since it was conventional wisdom amongst HN and every designer that i ran into that somehow white backgrounds were easiest and also you should use grey text to reduce contrast.

(added: we’ve got some of those folks popping up in this thread now.)

and then bam one day we’ve got dark backgrounds everywhere.


👤 jbb67
it didn't. it's just a fad amongst young programmers that will slowly dissipate

👤 Kalanos
developers develop apps and like dark mode. light mode hurts my eyes

👤 sebnukem2
What I want to know is why I'm not reading this in dark mode.

👤 didip
Because dark mode is superior.

It can be used during day time and it doesn't give you headache at night time.