
Building dark mode on Stack Overflow - lobo_tuerto
https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/
======
userbinator
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...

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

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

------
beders
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! ;)

~~~
noahtallen
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

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

[https://guidebookgallery.org/pics/gui/settings/appearance/wi...](https://guidebookgallery.org/pics/gui/settings/appearance/win203-1-1.png)

3.11:

[https://guidebookgallery.org/pics/gui/settings/appearance/wi...](https://guidebookgallery.org/pics/gui/settings/appearance/win31-1-2.png)

95:

[https://guidebookgallery.org/pics/gui/settings/appearance/wi...](https://guidebookgallery.org/pics/gui/settings/appearance/win95-1-2.png)

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

[https://www.dedoimedo.com/images/computers_new_2/windows-7-s...](https://www.dedoimedo.com/images/computers_new_2/windows-7-settings-
border-color.png)

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

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

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

------
ucarion
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](https://www.ibm.com/design/language/color)

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

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

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

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

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

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

~~~
userbinator
_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.

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

------
nikivi
Hope GitHub is next to release dark mode

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

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

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

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

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

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

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

~~~
asjw
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

------
ssivark
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)

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

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

~~~
saagarjha
Hope springs eternal.

