4 ms·

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

by CSSer 6y ago

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.

gruez 6y ago
>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?
- 3000000001 6y ago
  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.
  - coffeeling 6y ago
    Yup, the light theme advantage is due to it emitting more light than a dark theme at the same brightness setting.
- CSSer 6y ago
  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...
  - gruez 6y ago
    >[...] 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_apertures 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.
    - CSSer 6y ago
      > 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.
    - jrockway 6y ago
      > 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 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.)
  - sxp 6y ago
    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 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.
imron 6y ago
> 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.
- CSSer 6y ago
  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.
tdsamardzhiev 6y ago
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.
- blunte 6y ago
  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.
  - tdsamardzhiev 6y ago
    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.
- fouc 6y ago
  Science says we read faster with black on white. But reading speed isn't important when you're coding, comfort is.
Willamin 6y ago
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 https://github.com/biletskyy/flatwhite-syntax Sublime Text 3: https://github.com/Willamin/flatwhite https://github.com/Willamin/flatwhite
- slenk 6y ago
  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.theme-a https://marketplace.visualstudio.com/items?itemName=esz.them...
  - chipotle_coyote 6y ago
    I don't think VS Code actually supports background color styles for syntax highlighting. https://github.com/Microsoft/vscode/issues/3429 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.)
- sooheon 6y ago
  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.
jameslk 6y ago
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.
deleted 6y ago
[deleted]
coffeeling 6y ago
> 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.

by CSSer 6y ago

gruez 6y ago

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

3000000001 6y ago
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.
- coffeeling 6y ago
  Yup, the light theme advantage is due to it emitting more light than a dark theme at the same brightness setting.
CSSer 6y ago
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...
- gruez 6y ago
  >[...] 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_apertures 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.
  - CSSer 6y ago
    > 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.
  - jrockway 6y ago
    > 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 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.)
- sxp 6y ago
  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 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.

imron 6y ago

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

CSSer 6y ago
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.

tdsamardzhiev 6y ago

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.

blunte 6y ago
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.
- tdsamardzhiev 6y ago
  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.
fouc 6y ago
Science says we read faster with black on white. But reading speed isn't important when you're coding, comfort is.

Willamin 6y ago

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 https://github.com/biletskyy/flatwhite-syntax Sublime Text 3: https://github.com/Willamin/flatwhite https://github.com/Willamin/flatwhite

slenk 6y ago
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.theme-a https://marketplace.visualstudio.com/items?itemName=esz.them...
- chipotle_coyote 6y ago
  I don't think VS Code actually supports background color styles for syntax highlighting. https://github.com/Microsoft/vscode/issues/3429 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.)
sooheon 6y ago
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.

jameslk 6y ago

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.

deleted 6y ago

[deleted]

coffeeling 6y ago

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