GitHub Dark Mode

Lead designer
2020
Company

GitHub — The world’s leading AI-powered developer platform.

Context

The dark mode feature was highly anticipated, with users already creating their own custom themes to address the gap. Following the redesigns, this project became a priority as the new color paradigms significantly altered the visual system. The challenge was to create a cohesive and accessible dark mode that aligned with the updated design language while meeting user expectations for flexibility and usability.

The dark mode feature was highly anticipated, with users already creating their own custom themes to address the gap. Following the redesigns, this project became a priority as the new color paradigms significantly altered the visual system. The challenge was to create a cohesive and accessible dark mode that aligned with the updated design language while meeting user expectations for flexibility and usability.

Highlights

Color audit and codification

Codifying the existing color system was an iterative process of testing hypotheses. In 2020, this task presented unique challenges: my CSS/SASS knowledge was still developing, and tools like Figma variables, which would have streamlined the process, were not yet available. Despite these limitations, I approached the project methodically, experimenting with design patterns and building a system that balanced consistency and flexibility.

50 shades of dark mode

Dark mode is about dimming the lights—but how much? Should there be a tint? Practical light accents? Could this be an opportunity to experiment with other color languages or even change button colors? For weeks, we delved into the look and feel of dark mode, testing various combinations of saturation, lightness, and hue. This exploration allowed us to refine the visual language and ensure the dark mode was not only functional but also visually harmonious with the overall design system.

Communication and collaboration.

This project still brings a grin to my face when I think about the level of collaboration it took. It felt like working alongside superheroes, each with their own unique superpowers. Julius spearheaded the color palette, making it more systematic and creating a framework that continues to evolve and inform color decisions at GitHub. Javi tackled some of the hardest systems challenges I’ve ever encountered—what we called "subsystems," which encompassed elements like labels and empty state illustrations that were governed by separate systems. Cole, Simon, and Rohan worked in seamless tandem to handle testing, implementation, and QA, ensuring every detail was flawless. And this is just scratching the surface of the incredible creativity and problem-solving that unfolded. It was the best—and most challenging—project I’ve ever been a part of, and it shaped my understanding of what exceptional collaboration looks like.

Resolution

Universe 2020

In November 2020, we rolled out dark mode, and the response was electric. The excitement from users was immediate, and their feedback quickly drove us toward the next iteration. Today, GitHub offers more than eight themes tailored to different vision types and contrast needs, making the platform more accessible and customizable than ever. Below is the announcement video for the feature. (As for the video of me bawling while watching it—let’s just say that one’s staying in the archives and out of my professional portfolio!)