Who’s afraid of the dark theme?

Designing a dark theme for Clarity Design System

Part 2 of Going Dark

As soon as we launched our design system, we received a surprising number of requests for a dark theme version. I’m happy to say, we delivered on this request a few months ago to a very positive response. I’m a visual designer and I worked with developer, Matt Hippely, to put the dark theme together. Matt did the implementation part and covered his process in a blog, called Going Dark. I’ll take a few minutes now to explain the visual side of going dark.

My assignment was to make this dark theme not only visually appealing but also pass the rigorous usability and accessibility standards we set for the original Clarity theme. I had some reservations about creating a dark theme. My preconception of a dark theme revolved around early gaming sites with pitch black backgrounds, densely covered with neon text and graphics — the painting equivalent of Elvis on black velvet or airbrushed van art…which is fine if you’re into that kind of thing.

Initially, I thought this would be a piece of cake, but as often is the case, I was very wrong. The cake turned into a delicate, temperamental soufflé that required a lot more of my attention than I expected. This being my first attempt at designing a dark theme, I started out with the existing Clarity color palette, confident that I could work with the range of 10 shades in the black to white range. The end result was layers of backgrounds and components that shifted in tone too abruptly and felt jarring. First fail complete, I accepted that the color palette needed more subtle values.

Pick a color

My first step was to choose the main background color since it would be the basis for everything placed on top of it. I quickly mocked up a few dark background colors in Sketch (app) and added a sampling of some components and text. I had to lighten and increase saturation on the original Clarity components to achieve good contrast against the dark background. We tested both neutral black and greys next to slightly blue backgrounds. The blue version was a clear winner to me and to an informal sampling of colleagues. It felt easy on the eyes —calm and friendly, whereas the neutral dark background felt stark and heavy. This is not to say that neutral black should never be used. There are a lot of sites that use pure black with a lot of white space — or black space, in this case — with beautiful results. For Clarity, the fact that it’s an open source design system makes the use case unknown. What type of content will it have? Will it have lots of dense context? ¯\_(ツ)_/¯ . Our focus is Enterprise which is not known for sparse content. With this in mind, the blue was a more flexible approach.

Neutral vs Blue. The difference may be subtle here, but it is very evident on a large screen.

After I chose the main background color, I created a ramp of values (using Adobe Illustrators. Edit colors > Blend vertically command) to add as many steps of color as I needed. I started out with more values than I needed. I chose #1B2A32 for the main background and #22343C for modal backgrounds, keeping in mind that these two colors would map to the original light theme’s hex values for main background and and modal background.

Hierarchy in the upside down

In making components work in the dark, it was not only necessary to adjust contrast for accessibility but also to maintain the same hierarchy set in the original Clarity theme. On a light background, a dark object has more contrast and thus is higher in visual hierarchy than a light object. On a dark background the opposite applies. This may seem obvious, but I learned this the hard way. That’s fail number two for those of you counting.

Text is tricky

A dark theme means the text has to be white, right? Not so fast. Pure white should be used with caution because it can often be too strong against a dark background. The biggest complaint from users about dark themes is that it’s hard to read text on a black background especially when there is a large amount of text. Clarity has a high standard for accessibility and high contrast is generally a good thing, but too much can causes your eyes to fatigue faster. Our components are designed to meet the WCAA requirements for accessibility. There are several tools at your disposal to check contrast. I used a Sketch plugin called Stark and an online app, Web Aim contrast checker . They both show whether your combination of foreground and background colors pass or fail in accessibility. They also provide the contrast ratio so you can gauge how far you are from the minimum ratio of 4.5 : 1.

Clarity typography consists of six heading styles and eight paragraph styles. For simplicity, I grouped the styles into three groups. I assigned a lighter color to the large and small size groups. This was intended to give large headings impact and to improve the legibility of the smallest sizes. The medium size group includes body text which is used the most. I assigned a lower contrast color to this group so that large amounts of text would not cause eye fatigue.

Choosing these two colors was a balancing act that required massaging the colors in many iterations because they had to work on both the main background and the modal background colors.

Not using pure white for text doesn’t mean that it has to be neutral grey. In fact, adding a drop of blue to the text color made it more cohesive with the background while brightening the text, making it more attractive and easier to read. To create this text color, I lightened the background color to a light shade and then moved the color slider a smidge in the blue direction to make it slightly more saturated than the background. The bump of blue helps to make the text pop from the background while maintaining a relationship to it.

The text on the left has some blue in it which makes it feel cohesive with the background. The text on the right is 100% neutral and looks dull against the dark background.

A few things I learned in the process

  1. Color is hard
    Look at the entire set of components as a whole. Don’t focus on one item at a time. Group items into levels of hierarchy and always keep hierarchy in mind. Make sure you have all the pieces, then establish a color or two as the main background color.
  2. Tweak your colors in a browser
    In my first iterations, I made mockups in Sketch app. But I soon found that it made more sense to do it in the browser. For one thing, some colors look slightly off in Sketch from the browser. For another, fonts render thinner in Sketch than in Chrome. This will definitely affect what colors you choose for text. Our developer created a sample Clarity app using my first iteration of dark theme colors. I used Chrome Inspector to tweak the hex values to my heart’s content. When I liked something, I took a screenshot. I did this over and over and compared them side by side.
  3. Keep it simple
    As I finalized the palette of colors, I removed the colors that were not used and consolidated some colors that were negligibly close. Keeping the number of colors smallish helps managing them easier and keeps me on good terms with our developer.
  4. This took forever! 
    Doing this was a highly iterative process. It ended up taking longer than I expected because changing the color of one component often had a domino effect and created more adjustments. After you finish an iteration, it’s important to step back and come back to it with fresh eyes. It’s good to borrow others’ eyes too!

The process for this project has been a great learning experience. I learned some things I didn’t know about color usage and theory. We witnessed some teams within our company boldly volunteer — fearless guinea pigs that they are — to apply a very new dark theme to their products. I’m happy to report that so far the response has been very positive — both for the look and feel and for ease of implementation. Yay! If you’re in need of a dark theme, I hope you’ll give Clarity a try and let us know what you think!