Introducing Dark Mode for Stack Overflow | Beta is out there Checkout
For many years now, people have been asking for the option to view Stack Overflow in dark mode. Finally stack overflow introduced dark mode in stack overflow.
Stack overflow mentioned that
“There are a lot of challenges to implementing dark mode across a platform like ours. We are among the 40 largest websites in the world in terms of monthly unique visitors. We also have hundreds of communities with different design aesthetics. On top of our public Q&A platform, we also have our developer profiles, job listings, product pages, and many other surfaces.
Aaron Shekey, Stack Overflow’s principal product designer says that
“I often find the usable contrast to be way too low. It’s hard to use the full spectrum of colors to express your interface. It’s even harder to introduce depth with shadows and other visual cues. Light text on dark backgrounds is fatiguing to my eyes. Things that are hard to manage on light screens like simultaneous contrast is even harder to manage against dark backgrounds.
But here I am, the guy who finally shipped dark mode on Stack Overflow.
The work I’m about to talk about was never about dark mode specifically, even though countless users asked for it. By solving everything along the way to dark mode, Stack Overflow would modernize its front-end codebase, enable accessibility-conscious theming, and push for adoption of our design system. We could give our users dark mode and offer future accessibility modes for free?
Let’s do it!”
Color exploration for Stack overflow dark.
When building our product’s original color scales, we—perhaps naively—took a single color value and modified it using Less color transformations. For example, we’d define a Less variable,
@red and darken it by 10% a few times using
darken(@red, 10%). Then we’d tint to lighten a few times
tint(@red, 10%) at the other end of the spectrum. This would lead us to a color scale represented by
@red-900 with 10% steps in between.
In my first explorations of what Stack Overflow would look like in dark mode, I wanted to simply test swapping the white background for black, and reversing the color scales. With this approach,
@red-900 with the values in the middle staying pretty much the same.
Introduced beta mock for stack overflow.
Steps to change to dark mode
- Go to setting
- Select preference , Select your modes.