Hacker News Reader

Comment by CSSer | Hacker News Reader

They taught us this in advertising. White text scatters over the iris on a dark background, so it’s harder to read the copy. I’ve even read it in UX articles. It was amusing to get out of school and into the tech industry to find dark mode everywhere.

Granted, I use it too. Both my terminal and editor have dark themes. I’m not really sure why. The terminal isn’t really a big deal to me. I could go either way there. But I’ve just never found a lighter color theme that wasn’t offensive in an editor. I always try them for a bit and end up switching back.

View on HN

For a light color theme with a slightly different take than usual, I would recommend Flatwhite.

The differentiating idea behind it is that for dark syntax themes, it makes sense to have the foreground of text be different colors. In contrast, for light syntax themes, it makes sense to have the background of text be different colors.

Atom: https://github.com/biletskyy/flatwhite-syntax Sublime Text 3: https://github.com/Willamin/flatwhite

Ooo, I like this. This seems like a close-ish replacement in VSCode but the pic doesn't even exist: https://marketplace.visualstudio.com/items?itemName=esz.them...

I don't think VS Code actually supports background color styles for syntax highlighting.

https://github.com/Microsoft/vscode/issues/3429

I ran into this trying to do a Code theme a few months ago. (My favorite light theme -- and I am mostly a light theme person, as I have never believed dark mode was a particularly good idea except for terminal windows -- is the default theme from the all-but-defunct Mac editor Espresso, which used subtle background coloring in some places.)

Thought it looked familiar, and I realized I saw the idea in an old Nikita Propokov screencast. Nice to see him mentioned there and Clojure code as an example.

If science says I'd be more productive with a light theme, then we need better science.

"On a biological level, our eyes prefer the contrast between a light background and dark foreground."

On a biological level, our eyes prefer not to stare at a light source all day every day. Yet here we are.

That's a bit like saying stereo speakers are too loud. That's why we adjust the volume very frequently.

For monitors, you should be adjusting the brightness frequently and in accordance with the ambient light level.

If you do that, you should perceive the background of your light mode content as neutral and so inoffensive that you don't even notice it.

I've tried different options, and know what works for me and what doesn't. Not saying it's the same for everybody, but I'm pretty confident that (1) dark mode works wonders for me, and (2) I'm not the only one.

Science says we read faster with black on white. But reading speed isn't important when you're coding, comfort is.

I recall the argument for a dark theme in editors/IDEs was to make it visually easier to see color differences in code syntax. With a white background, the white light competes with the colors. Where as if you're reading an article on the web, you'll really just need to discern the text and not so much the color.

> I’m not really sure why.

For me, it’s because too much white background feels like staring directly at a light globe for several hours a day, and it hurts my eyes.

I can’t argue with that. I think the syntax highlighting is also part of it. It’s hard to have vivid, readily meaningful colors against a background that is washing everything out. Shades of dark text just aren’t as compelling. Come to think of it, that’s probably why most light themes are “solarized”. I guess you can only go so bright.

> Granted, I use it too. Both my terminal and editor have dark themes. I’m not really sure why. The terminal isn’t really a big deal to me. I could go either way there. But I’ve just never found a lighter color theme that wasn’t offensive in an editor. I always try them for a bit and end up switching back.

I spent ages hunting for a VSCode theme that wasn't just a blob of undifferentiated white. Turns out, now light themes are designed as dark themes first, flipped and just generally obey the rules of dark themes (eg. color pops out a ton in dark mode, it's a much more balanced part of the UI in a positive polarity environment and can be used more liberally).

We used to just design UIs, and most of what people started calling light themes were actually just "normal, not trying to be obsessively dark UI design". Normal UI design has really wide latitude to use a lot of stuff, dark theme is a much more narrow, specific philosophy in comparison. Take a look at eg. Office apps. The default "light" theme isn't super white, it's called "Colorful", is colorful, and it looks great. It just does what looks good without trying to be especially light or dark and surprise surprise, it works.

What did I end up with? Visual Studio Blue. All the different UI things are various very distinct shades of blue so the app has a characterful look and the UI elements are clearly differentiated, and the background has a slightly yellow hue to it. Does it look a little early 2000s-y? Yes. But it works.

>White text scatters over the iris on a dark background, so it’s harder to read the copy. I’ve even read it in UX articles.

That doesn't make sense. Why does light from white text scatter, but not light from white background?

I’ll admit it’s not the best phrasing (and I’m definitely not an ophthalmologist, so I’m playing fast and loose here). Your pupils dilate to let in more light because there’s less light overall when the background is black. This causes your lens to distort slightly, thus making the edges of the white text appear to be fuzzy or bleed into surrounding characters. I couldn’t find a scientific source on this, but a couple articles called it the “Halation effect”. Over time, this creates eye strain, and it’s apparently worse for users who have astigmatism. Of course, if the text is sufficiently large enough, this effect should be at least somewhat mitigated. Generally, at least in my use cases, it’s not large enough. Although the more I think about it, I’m rarely really staring at white on black. It’s usually more like various colors against a very dark navy. I should probably just rest my eyes more...

>[...] This causes your lens to distort slightly, thus making the edges of the white text appear to be fuzzy or bleed into surrounding characters

The effect you're describing is correct, but the mechanism isn't. Aperture (pupil) size directly affects how focused the image is. The smaller the aperture, the sharper the image is. As an extreme example, if your aperture is a single point (a pinhole camera), the image can be focused without a lens.

https://en.wikipedia.org/wiki/Aperture#Maximum_and_minimum_a...

>I couldn’t find a scientific source on this, but a couple articles called it the “Halation effect”.

Articles describing this seems to say it's caused by the film medium, rather than being an optical effect.

> As an extreme example, if your aperture is a single point (a pinhole camera), the image can be focused without a lens.

Diffraction limits the sharpness, though. https://en.wikipedia.org/wiki/Diffraction-limited_system. Pesky wave nature of light in action.

> Articles describing this seems to say it's caused by the film medium, rather than being an optical effect.

Halation in film is caused by reflection from the back of the film. Most of them have an anti-halation layer to reduce this effect. I don't see any reason why one's eye wouldn't also be vulnerable to this effect (and probably has some biological mechanism to prevent light from being reflected out of the eye. Cats sure don't have this, though.)

> Articles describing this seems to say it's caused by the film medium, rather than being an optical effect.

Yeah, I noticed that. Searching the term directly gave me results related to film, but when I used other terms describing the effect they mentioned it in a different context. Makes me wonder if someone is just confused.

To understand the difference between a small pupil and a large one, it's useful to understand how "aperture" settings work on a camera: https://en.wikipedia.org/wiki/Aperture

Specifically, bright light results in a small pupil which allows for better focus. And low light results in a large pupil which reduces focus.

This makes intuitive sense to me. I assume it’s to do with more overall light being emitted from a white background/black text combo being easier for our eye to process.

Yup, the light theme advantage is due to it emitting more light than a dark theme at the same brightness setting.

Reply on news.ycombinator.com