Introducing Dark Mode to the Design System

Case Study

Role

Product Design

Team

1x Software Engineer

1x Product Manager

Duration

1 week

Intro

In 2020, I designed one of the most requested features by our customers at Educative, the dark mode.

Research

I started by looking at existing applications and design systems to figure out the building blocks for the dark mode.

Foundations

After enough research, I decided to settle on Material's guidelines for dark mode. It uses color and shadows to define elevation and levels since shadows alone aren't enough to elevate components on dark backgrounds.

The Ramp

A 5-color dark grey ramp was created to accommodate backgrounds. The colors from our existing grey palette were used for the text hierarchy. WCAG Accessibility was important for long-form reading here, however, I also wanted to make sure the text wasn't too bright for readers. It took 2-3 iterations post-launch to get the text color just right.

Changes to the Design System

I added dark mode variants for each component and tested them rigorously against each of the 5 backgrounds. These components were then added to the design system. Our existing Danger color palette had to be fixed for the Dark Mode.

The Conversion Guide

Due to the scale of the product, I prioritized main pages of our product to be redesigned in dark mode. For the rest of the pages, I created a conversion guide for developers, using code as examples. This guide can be seen here. Over the course of next few months, I designed and shipped all of our pages and components in dark mode.

Future Work

Adding the dark mode left some incompatibilities with our existing colors in our design system. As I continued my focus on other projects, this thing went into the backlog, however, I continued my research. As I write this case study, I am collaborating with another teammate on revamping our color system for the dark and light mode.