Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Good point. Definitely seems designed for mobile (only).


I know this is going off the main topic. But it is very strange that I discover Black background, as in Dark mode in macOS, doesn't work at all despite what I have always thought it would be cool. But Black background on mobile devices work absolutely great!.

And I have no idea why, I searched on Google and couldn't find any decent answer. All results were either OLED being battery friendly with switched off pixels or other mobile UX for Dark mode. None of them describe the difference felt in Desktop and Mobile. Any link or explanation would be much appreciated.


As a fan of dark color themes and displays, I've shared a bunch of thoughts related to this on my personal blog. But I'd like to share a few quick thoughts below. I am not an expect on these matters, so these are just my opinions:

1. Glare. When reading on a small device, the amount of glare reflected in the screen space occupied by black pixels may be fairly minimal depending on your reading environment and positioning. Also, although mobile devices use glossy display surfaces, they tend to have several anti-glare layers in the display stack. You said your computer is macOS, so I suspect you're unlucky enough to be reading on a glossy laptop display. With "dark mode" color schemes, your eyes can more easily see the reflected scene (maybe your office lights, an exterior window, or even your own face). And the focal length of that reflected scene is 2x your reading distance to the screen. That reflected scene at an extended focal length is more relaxing for your eyes to focus on. So in order to read, you need to fight your natural tendency to relax and look at the reflected scene.

If you are lucky enough to be reading on a matte desktop display (typically a professional or prosumer monitor, such as a Dell UltraSharp or LG 43MU79-B), the glare will be minimal and it should be much easier to read.

2. Pixel density. I contend that one reason dark themes have become more prevalent in recent history is thanks to wider adoption of high pixel density displays. At a legacy density of approximately 75 dots per inch, the stroke weight of bright text on a dark background appears too faint if the strokes render as just one pixel in width. Higher pixel density allows for the strokes of letters to be wider than a single pixel, allowing for greater clarity. If you ever designed a dark theme in the days of ~75 dpi displays, you might naturally favor bold text as the default because it was considerably easier to read. (Interesting sidebar: many console oriented bitmap fixed-width fonts historically used two pixels for stroke weight, especially in the horizontal dimension, presumably because they were designed to be used bright-on-dark.)

Now, you did again say you were reading on macOS, so your display's pixel density is probably higher than ~75 dpi. But a MacBook Pro is still only ~220 dpi. A Surface Book is ~260 dpi. A Dell XPS laptop with a 4K display will be a little higher still (maybe ~300 dpi). But many phones are using 450+ dpi displays. The stroke weight of a character on a mobile device is several pixels wide, so it's highly defined and clear.

3. Font selection (related to above). Bloomberg has selected a serif font, presumably because they are a media organization and serif fonts are typically used for article bodies. However, combined with pixel density, the serifs will lose a lot of their definition and (in my opinion) reduce readability versus a sans-serif font. As an experiment, pull up the dev tools and change article[data-brand="businessweek"] .body-copy p to use sans-serif and see what you think. It may be marginally easier to read.

4. Don't discount OLED. The contrast that Bloomberg selected is maximal (pure black background and pure white text) and that works well for OLED since the background vanishes entirely. However, since most desktop and laptop monitors are not OLED, you're still getting backlight bleed, so the contrast is imperfect. Especially combined with the glare factor above, my experience is that given LCD backlight bleed, it is better to use a dark gray background instead of stark black. This makes the backlight bleed less distracting, for lack of a better word. The background ends up looking more uniform.

As with above, try adding "background-color: rgb(40,40,40)" or similar to .body-copy and see what you think.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: