Building dark mode on Stack Overflow | Hacker News Reader

Building dark mode on Stack Overflow

stackoverflow.blog

60 pointslobo_tuerto53 comments

As someone who really really hates the "reduce contrast" trend, I personally thought the screenshot labeled "have to do better than this" was the most readable. The one after that just looks faded.

Then again, I also find it funny that "dark mode" is heralded as something revolutionary, when long ago people could customise UIs far more. You can still do that with userstyles, another thing that seems to have gotten mostly ignored these days...

I agree, I prefer the high contrast too. I also agree about customization, I would suggest using proper CSS classes and HTML and so on in order to allow better user customization with user styles and stuff like that, rather than relying on the service provider. Web pages without CSS can use the settings (for colours, font sizes, etc) specified by the user, so someone should not complain about the lack of CSS, and more so too you should not use CSS too much on web pages I think. (But if you do, ensure you do not do it wrong; if you set the foreground colour you must also set the background colour and vice versa. But don't specify colours at all unless you need to use multiple colours in your document.)

I don't think anyone heralded it as revolutionary. It's an affordance to the reality that it's a different experience using devices in darkness than in brightness. Mobile screens make dark situations more prevalent.

As to UI customization, often that was an inconvenient cop out not a great enabler. "We don't want to figure this out so just change things yourself, but then you'll switch PCs or reinstall and you'll lose all of those customizations and you'll never do it again and you will forever leave everything vanilla".

Is it worth websites making a big deal about? No, not really... At most it should put a little badge when it detects the dark mode CSS allowing unwilling users to disable it, but it doesn't seem like something that gets dragged on as long as it has by a couple of sites.

I agree - it has a nice high contrast and I didn't really see any significant flaws.

> I personally thought the screenshot labeled "have to do better than this" was the most readable. The one after that just looks faded.

Hm. I like the "better" one more. However, it's cheating -- the first screenshot displays a lot of white text in the filters and the text of the questions. The text of the questions is most of what I find off-putting about the first screenshot.

The second screenshot displays no white text at all. The filters menu isn't visible. The text of the questions isn't visible. Text that's gray in the second screenshot is also gray in the first screenshot.

What kind of comparison is this?

It's because the first two are actually not a comparison. The first image is a screenshot of author's first attempt, while the second is a designer's (maybe the author's?) mockup.

For an accurate comparison, compare the first and last screenshots in the article.

I very much miss the system theming of Windows XP era. Sure it often looked like crap but sometimes it was great too. Maybe it’s just nostalgia though. But I guess we still have that with desktop Linux...... for the trade offs.

Sure it often looked like crap but sometimes it was great too.

The important part is that you could change it relatively easily if you didn't like it, but the "modern" trend has been to remove that ability.

Yeah that's one reason I keep wanting to try desktop linux again. But then I remember how much work it will be to get drivers working reliably and consistently. Also the fact that there's still really no consistency on linux, e.g. certain apps refuse to respect the "theme" and stand out like a sore thumb.

I find it funny that it's pitched as helping eye strain and readability when a light background dilates your eyes, improving focus.

That and everyone patting themselves on the back for building dark mode.

Maybe. I find so much white light overwhelming and have used dark styles nearly everywhere for many years. Even with night color shifting the lighter backgrounds feel like overkill

> I personally thought the screenshot labeled "have to do better than this" was the most readable. The one after that just looks faded.

It looks like they're using the darkest background ("pure" black or nearly so) for code blocks. Seems like a reasonable choice to me, given that the need for clarity is strongest there.

AMEN. You could set up any color scheme you wanted in Windows 3.1, 30 years ago. You could do so in Unix GUIs as well.

The vaunted Apple UI was the exception, forcing an inverse color scheme on all users, all the time. They refused to admit the failure of the "screen as a piece of paper" analogy that ascended during the "desktop publishing" rage of the late '80s/early '90s.

So now Microsoft inexplicably REMOVED user-definable color schemes from Windows (around the time of Vista, I think), and Apple has clumsily implemented a hard-coded "dark mode." If you're a developer, you know how hideously broken numerous Apple UI controls are now as a result (rendering nearly invisible text and arbitrary background colors).

You could spot Web designers and even design tools that didn't know what they were doing when you'd pull up a Web site to find it mostly blank. This meant that the page overrode your system's dark background color with white, but didn't override your white text color. The result, of course, was white text on a white background.

Google embarrassingly introduced this defect into the Google News page at some point, rendering all the story abstracts invisible.

Good times.

Not a dark mode guy but the high contrast mockup actually looks very nice.

It is comical we are getting excited about a bunch of CSS files and other assets.

As others have pointed out: Desktop apps never had this problem and decent operating systems gave you much more freedom to adjust the color style to your liking.

Now we have half-assed solutions running in a hypertext display engine. Amazing! ;)

IIRC, Windows and macOS only offered built in dark mode in the system UI components until the last year or two, and definitely don’t offer much color customization freedom... except for the global highlight or accent color

It used to be far more customisable for Windows; this is Windows 2.03:

https://guidebookgallery.org/pics/gui/settings/appearance/wi...

3.11:

https://guidebookgallery.org/pics/gui/settings/appearance/wi...

95:

https://guidebookgallery.org/pics/gui/settings/appearance/wi...

...and that dialog remained almost unchanged up until Windows 7:

https://www.dedoimedo.com/images/computers_new_2/windows-7-s...

Unfortunately, after Win7 it was removed, and they basically took away customisation completely in Win10.

What's left of customization is the choice of an "accent color", plus light and dark modes.

Except this new Windows light and dark mode option only changes the colors on a handful of applications, meaning most Win32 apps then look out of place.

Whereas that older style of Windows color configuration would automatically adjust each and every well behaved Win32 application.

Mac OS had themes (briefly) back in 1998 [1]. Linux (GTK+ and Qt) still do. Windows has supported custom fonts/colors since at least 1992, even if the result wasn't always tasteful [2].

[1]: https://www.blakespot.com/mac/Images/Gallerypix/drawing2.jpg [2]: https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho...

The Windows color scheme editor is long gone. Don't know if it was Vista or 7 when it disappeared.

Windows 10 is a shitshow.

> It is comical we are getting excited about a bunch of CSS files and other assets

Especially on a site like stack overflow when there are literally 10,000 other things they need to improve that would be appreciated more.

That's the SO way, though—there's so much they need to fix and won't or can't, that they need to distract from their user-hostility by making a fuss over whatever small user-positive things they do do.

Don't laugh, it has real consequences on health: "black text on white paper heavily overstimulated retinal OFF pathways. Conversely, white text on black paper overstimulated ON pathways." https://www.nature.com/articles/s41598

I have good experience using the theme-changer package in emacs which turns dark theme after sunset automatically.

The article mentions they use Bezier curves over the HSB colorspace.

> I used Lyft’s amazing Colorbox to help normalize our colors. Instead of a naive linear scale at 10% increments, I used bezier curves—a vast improvement at the more extreme ends of the scale.

Linear HSB is very naive, but HSB is still quite naive. It's just a cylindrical version of a color space optimized for displays, not human perception.

I don't understand why they wouldn't instead opt for the CIELAB color space, or its cylindrical equivalent. IBM does this, and it gives them effortless support for dark mode, by just flipping the luminance component of colors:

https://www.ibm.com/design/language/color

You can visualize the CIELAB behind IBM's color scheme here:

https://cielab.io/ (go to "IBM Carbon")

Great, now every visit from private mode shows huge "dark mode" banner. How about just using prefers-color-scheme media query?

When you have your OS set to dark mode and a site blinds you with it’s whiteness...you see the total UX fail. UX is about the U. If they’ve specified I want things black on contrast, then support it. Because they expect it. Post shows how feasible it is...and users, the U, will respect you for it and keep coming back.

Otherwise your first impression is simply blinding and not in a positive way

This literally happened as I switched from TFA to this HN post...

In a sense, I suppose it is one aspect of accessibility. It's not a "total UX fail", though. You can still read the text and accomplish your task, even if the brightness isn't ideal.

Speaking of blinding, it's too bad the other aspects of accessibility aren't as popular. When screen reader support was broken, they didn't write blog posts about fixing it.

This is a good article. I'll bookmark it and probably refer to it in future.

That said, why does everybody care about Dark Mode so much these days? It's an interesting problem; I worked on it 20 years ago and solved it adequately for my own purposes. But it's not a very important problem, especially right now.

Dark mode is much more readable for many people. That’s why it matters. In my opinion as a user, it’s as much of an improvement as going from a UI with tiny fonts to one with legible text sizes. And once most sites and apps you use have a dark theme, the ones that don’t become even more jarring and noticeable.

I think apple added support so everyone else did too?

That said, why does everybody care about Dark Mode so much these days?

My guess is that people either don't know/can't be bothered to adjust their monitors' brightness and contrast to a comfortable level, so they're left at the default which is usually eye-burningly bright, and they're trying to work around this in software by reducing brightness and contrast. Unfortunately this also means those who do have their monitors adjusted comfortably are subjected to much worse contrast.

I have had many devices where "minimum brightness" is brighter than the brightest I would have actually wanted.

> why does everybody care about Dark Mode so much these days?

Let me guess, you think wheelchair ramps are a fad, too?

Because we don't like our eyes getting blasted by brightness pollution from all white websites? Some of us have disabilities?

Hope GitHub is next to release dark mode

Dark Reader extension does a better job than their design, what a waste of time, effort and cash.

Dark reader actually has a js library you can add to your site to allow people to essentially toggle it on, wothout having the extension. Dark mose for free, basically.

I can not digest dark mode when working with the text. I know it is individual as I saw that many programmers do use it. To each their own I guess.

I'm not sure choosing a color scheme for your CSS is really 'building' anything.

I remember using a forum software on a site long ago (around the late 90s/early 2000s timeframe) where one of the options in the user preferences page let you adjust the colours of various things --- and not as in "pick from these limited choices", but as in "enter the CSS colour value, either a name or #hex", and I believe it saved them for every user since you'd only see them when logged in. Does anyone else remember what that could be?

Color customization was popular, hard to say

It could be a major undertaking for a sufficiently complex site like Stackoverflow, just like the article illustrates, because there just so many UI elements to re-color.

Thinking that choosing colors is a major undertaking is one of the most preposterous things I've read in here in a long time. Everything in this article should take a morning at most. People need to stop pretending trivial things are difficult just because they want to write a blog post.

Design is an actual discipline that people work hard at to produce the results that they do. Colors are a core aspect to UI design.

It is true

But not 100% in this case

They just recoloured something that already existed

Design must also account for spacing, layout, positioning and emphasizing things, according to the colour scheme

I think site/application-specific toggling of dark mode is a fundamentally broken idea, since the default on the web is white background pages. It’s an awful experience to turn up the brightness when viewing dark pages, when most pages you open will be white by default! Ideally, all portals must support theming modes, but I’d like the switching to be seamless, to prevent such nasty surprises. Maybe based on a standard (something like the site delivers both CSS sets, and logic in the browser chooses which ones to display, or suitably “invert” the default)

You're thinking of prefers-color-scheme, which already exists and is adopted by Stack Overflow.

My question is this: Why would I use dark mode on SO, or specific sites, if the next site I open will be rendered with the light theme with high probability?

Hope springs eternal.

Just use a web extension like Dark Reader, it renders dark mode for all pages.

Reply on news.ycombinator.com