Can You Add An Background Image For Bottom Border Stackoverflow

On March 30, 2020, we enabled folks to opt into a beta night style on Stack Overflow. Let's talk well-nigh the work that went into it.

I'm Aaron Shekey, Stack Overflow'due south master product designer on pattern systems. I help pattern all the interface components that get assembled into new features.

Beginning, a chip of irony. I don't really adopt dark user interfaces.

I often detect the usable dissimilarity to be way too low. It's hard to use the full spectrum of colors to express your interface. It's even harder to innovate depth with shadows and other visual cues. Lite text on night backgrounds is fatiguing to my eyes. Things that are hard to manage on light screens similar simultaneous contrast is even harder to manage against dark backgrounds.

Only here I am, the guy who finally shipped night mode on Stack Overflow.

The work I'thousand most to talk virtually was never near dark mode specifically, even though countless users asked for information technology. By solving everything along the fashion to dark mode, Stack Overflow would modernize its front-end codebase, enable accessibility-conscious theming, and push for adoption of our design system. Nosotros could give our users nighttime way and offer future accessibility modes for free?

Allow's do it!

Color exploration

When building our production's original color scales, we—mayhap naively—took a unmarried color value and modified it using Less color transformations. For example, nosotros'd ascertain a Less variable, @red and darken it by 10% a few times using darken(@reddish, x%). Then we'd tint to lighten a few times tint(@reddish, 10%) at the other finish of the spectrum. This would pb united states to a color scale represented by @carmine-050 through @carmine-900 with ten% steps in between.

In my first explorations of what Stack Overflow would wait like in dark fashion, I wanted to simply exam swapping the white groundwork for black, and reversing the color scales. With this approach, @red-050 became @ruddy-900 with the values in the middle staying pretty much the same.

This approach made everything take unusable contrast, and cruel into the traps of what I dislike about dark modes in full general. Pay close attending to the darkest value of red against the black background. It's virtually indistinguishable. More on that later.

Nosotros'd have to exercise improve than this

Starting with the mockup

Subsequently but diving in technically proved to be a false start, I instead chose colors by hand in my blueprint tool of selection Figma. I could design what Stack Overflow ought to look similar without concern for how the original color values would map. Reducing the overall contrast was fundamental to preserving depth in our interface, allowing elements to bandage shadows, and displaying the total spectrum of colors.

Starting with a mockup allowed us to define an aesthetic goal start, regardless of technical requirements.

Choosing a better algorithm

Subsequently picking a lighter background for nighttime manner, I could and so explore the color scale in a deeper way. First, I needed to solve some of the color issues the design system inherited in light mode. At the light end of the spectrum our reds and yellows weren't as usable every bit I'd liked. With some colors, the lightest value was too close to white, while others the lightest value was much also dark.

The original lightest xanthous was indistinguishable from white, and the darkest xanthous indistinguishable from black.

We had trouble at the darker end of the spectrum for each colour. When applying @red-900 and @blue-900 to a background, these colors were duplicate from black and each other. We needed an algorithm that would provide colors that still read as their primary hue at the lightest and darkest values, allowing us to build components from these colour values.

The darkest values of our colors were duplicate from each other and black.

When creating our notices component, we couldn't use colors from our design organization. Instead, nosotros had to eyeball custom colors.

These colors are beautiful, only weren't based on values within our color scale.

I used Lyft's astonishing 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 calibration.

After normalizing our color values at the light end of the spectrum, I could now build our notices component using values inside our color scale.

Dark versions

Once I polished our light versions, I could at present explore these colors confronting the dark background. I would ultimately terminate upwards mitt-tuning the algorithm's output to preserve long-used make colors at certain values. This would allow me to drop the new colors into production without too jarring a shift.

Calculation the colors to Stacks

If I had any hope of shipping dark fashion to Stack Overflow, I'd first demand to solve dark fashion using Stacks, our design arrangement, as a sandbox.

Variables

I needed to catechumen static, Less-compiled hex values to runtime custom CSS properties. This meant storing our colour values as var(--red-500) instead of a static @red-500. This was an interesting problem in our design organization, and the site in general. Nosotros routinely take a unmarried color value similar @red-500 and lighten or darken for hover and focus states and things like backgrounds and border colors.

Each of our many buttons and their individual states were based on a prepare of transformations of a single compiled color value. Information technology reminded me of this scene in The Big Curt. "Nosotros tin transform an original 10 million dollar investment into billions of dollars," and of form the whole affair explodes.

The problem with native CSS variables is y'all tin can't apply any type of Less transformation to them. darken(var(--crimson-500), 5%) breaks the compiler since CSS variables are only evaluated at runtime.

This meant I'd demand to refactor how all of our buttons were created. I'd move from:

.south-btn {     color: @white;     groundwork-color: @bluish-600;     border: 1px solid darken(@blueish-600, five%);          &:hover {         background-color: darken(@blue-600, 5%);         edge-color: darken(@blueish-600, ten%);     } }

I needed to interpret these to their more than explicit color values as divers by our color system. Instead, it ended upwards looking like this:

.s-btn {     color: var(--white);     background-color: var(--blueish-600);     border: 1px solid var(--blueish-700);          &:hover {         background-colour: var(--blue-700);         edge-color: var(--blue-800);     } }

I needed to do this across all of our Stacks components, non just the buttons. These aforementioned concepts applied beyond notices, popovers, modals, buttons, and links to name a few.

Browser compatibility

Oh, merely wait a second. CSS variables aren't supported past Internet Explorer 11, a browser we very much supported at the time of this exploration. Ultimately, nosotros made the decision to drib support for IE11, ripping out all the CSS hacks we'd added over the years to get information technology to acquit, and then shipping deprecation notices to users on IE11 urging them to install a new browser. This was not a determination nosotros took lightly, and this prerequisite alone took weeks of refactor.

Conditional classes

With IE11 no longer property us dorsum, I was able to work with our colors within Stacks. I chose to enable calculation the course .theme-organisation to the body chemical element. In doing so, we'd swap our low-cal colors for their dark equivalents behind the dark mode media query. Additionally, we could skip that media query entirely and just force the dark colors by adding .theme-dark instead to the trunk. This would permit users to see night way regardless of their system'south settings. My arroyo ended upward looking like this:

body {     --red-600: #c02d2e; }  body.theme-arrangement {     @media (prefers-color-scheme: dark) {         --ruby-red-600: #d25d5d;     } }  trunk.theme-night {     --red-600: #d25d5d; }

To offering complete flexibility, Stacks provides atomic colour classes that are just applied when dark way is enabled. Yous can read about Stacks CSS design choices at length at my personal portfolio. Past calculation .d:bg-dark-green-100 to an element, our engineers and designers tin say "In dark mode, employ a background of greenish 100." Additional conditional classes permit us to drop borders, bandy backgrounds, or alter text colors in nighttime way. Steve Schoger's got a really great tweet demonstrating the customizations that are sometimes required for dark modes. I've taken lots of inspiration from Tailwind.

Documenting it

In one case Stacks was in a place to send its own dark mode, we opted to add a button on the top of the site to apace toggle between them. Folks from Blueprint and Engineering need to be able to switch between both views as quickly as possible.

Adding the colors to Stack Overflow

I solved all these color issues on the design system side with relative ease. Our design system's inherited fewer mistakes from our by, making it easier to refactor with the new future in mind. In guild to send to Stack Overflow, I needed to maintain our original Less variables for backwards compatibility. This allowed u.s. to enable dark fashion on certain parts of our interface incrementally.

Since the majority of our interfaces built later on 2018 utilise Stacks, they go dark style and responsive layouts for free. The bulk of our site, yet? Not so much.

Site chrome

First, I'd need to make the largest changes I could without disrupting Stack Overflow's default light mode. These tasks were mostly only replacing static Less variables with their CSS variable equivalents throughout the site. I first applied background-color: var(--white) to the groundwork of the site, replacing groundwork-color: @white. This would now flip well-nigh of the folio accordingly. I then did this for font colors. Rinse and repeat. Generally, this really meant deleting a lot of CSS, since we frequently were over-specifying font colors on kid elements when we could but inherit from the parent.

Staff aircraft

Once I got the broad strokes down, I leaned on engineers Adam Lear and Nick Craver to provide a method to ship a preview of night mode to Stack Overflow employees. This would allow our staff to opt into a woefully cleaved dark style, allowing folks see how much conversion was left, but hopefully motivate them to assistance ready the portions of our site with the almost traffic. This would let me fix the biggest barriers of the site—our existing codebase.

Buttons

If the view you lot're working on is already built with Stacks, there really isn't a ton you accept to do to fix things for dark mode. You might decide we don't actually need a border, or you desire to select a slightly different shade of greyness for the groundwork. Unfortunately, for the widest majority of the site, we still weren't relying on Stacks.

This was most obvious when it came to our buttons. Over the years, nosotros had various implementations of buttons. The last was the most frustrating since nosotros targeted the push button element itself for styling. This ways that whatsoever push or input type="button" on the site would get default, super specific styling from a deprecated set of styles.

This kicked off a large refactor that's still ongoing to delete element-level references to push button in CSS, instead replacing them with their Stacks equivalent. For example, hundreds of input blazon="submit" would demand to be replaced with <button blazon="submit" class="s-btn due south-btn__primary">. To complicate things, nosotros were often wiring up JavaScript interactivity to these visual selectors. If nosotros changed the visual classes, information technology often broke what the button actually did. Across thousands of buttons, I needed to first add js- specific classes, wire them upwards, and then rip out the one-time visuals.

This somewhen got me to the point of deleting a bulk of the legacy push classes, allowing our buttons to switch colors properly when nighttime way was enabled—all with few regressions to the low-cal mode of our site.

The site header

Complicating things even further, our site-broad header has several modes. Light, dark, and themed. Both Teams and our network sites force a dark appearance of the header. Additionally, our Teams have a colored bar that'south established by the Team's avatar color. Like a lot of our components, the site header's CSS took a single color, measured if it was light or dark, then mutated that colour through a complex set of Less functions. Notwithstanding, nosotros couldn't only rip this out and replace information technology with pre-broiled CSS variables as we did on the design system. Our Enterprise clients actually theme their headers entirely, using a single color to generate all the custom overrides.

Light header

Dark header

Team header

For the lite header that we ship to Stack Overflow, we needed to find a solution to measure if our color was a CSS variable, or a static hex value. If it was a CSS variable, nosotros'd skip the Less transformations entirely, edifice a header that would swap colors based on night mode. If yous passed a static Less variable instead, information technology'd then measure that color for lightness or darkness, and build the advisable header.

Our approach ended up looking like this:

          & when ( iscolor(@theme-topbar-background-colour) ) {      @theme-topbar-way: if(luma(@theme-topbar-background-color) >= l%, light, dark);  }  & when not ( iscolor(@theme-topbar-background-color) ) {      @theme-topbar-style: automatic;  }

I'd then build the header appropriately based on automatic, calorie-free, or dark.

Post styling

The majority of Stack Overflow is user-generated posts. These posts brandish Markdown as the original question body likewise as answers and comments. At the time of Stack Overflow's launch, Markdown was relatively new.

Over the years, the industry has coalesced on some standard means of displaying things like headers and blockquotes. Dark mode was a perfect time to reconsider how we handled some of our post formatting—the most controversial being blockquotes.

We originally implemented blockquotes with an overpowering yellow background that reduced the contrast of the quote itself. The yellow was also problematic when displayed against a dark background. Ultimately, we switched to the industry-standard single gray bar to represent block quotes.

Code styling

For Stack Overflow, we very clearly have a lot of code to display. Our syntax highlighting colors used completely unbranded colors I'm pretty sure we inherited from the original syntax highlighting library we hacked in. Ultimately, I punted on a heavier redesign of syntax highlighting. Instead, I ended up shifting the existing syntax highlighting toward colors from our pattern system's values, finding night mode equivalents that didn't brand as well big a change likewise soon.

The results

Night mode beta's debut on March thirty, 2020

With these refactors in place, nosotros tin make larger changes with fewer regressions. We can far more hands consider extending our color palette to include high contrast accessibility modes.

Building a feature like nighttime mode is the result of a fundamental shift toward designing systemically at Stack Overflow. I've been pushing adoption of our design arrangement over the last year, using nighttime way as an opportunity to rebuild many parts of our products. This is the kickoff of many projects to bring more accessibility to our users.

Non counting the deprecation of Internet Explorer 11, work on dark mode started in hostage in July 2019 with an exploratory pull asking. Prior to that, you can see some public discussion of what it might take to build a night mode in Apr 2019. A proof of concept in the production codebase was hacked together in Oct 2019. After at least threescore follow-upward pull requests, the night way beta went live on March 30, 2020.

A huge thanks to the aid from diverse folks across the arrangement, Adam Lear, Des Darilek, Nick Craver, Kevin Montrose, Brian Nickel, Catija, Ben Popper, Joy Liuzzo, Sara Chipps, Kristina Lustig, Jon Chan, and Ben Kelly. ✌️

Tags: bulletin, dark mode, engineering, stackoverflow