Accelerating GitHub theme creation with color tooling
Dark mode is no longer a nice-to-have feature. It’s an expectation. Yet, for many teams, implementing dark mode is still a daunting task.
Creating a palette for dark interfaces is not as simple as inverting colors and complexity increases if your team is planning multiple themes. Many people find themselves using a combination of disjointed color tools, which can be a painful experience.
GitHub dark mode (unveiled at GitHub Universe in December 2020) was the result of trial and error, copy and paste, as well as back and forth in a Figma file (with more than 370,000 layers!).
A screenshot of the Figma file we made while designing GitHub dark mode
A few months after shipping dark mode, we began working on a dark high contrast theme to provide an option that maximizes legibility. While we were designing this new theme, we set out to improve our workflow by building an experimental tool to solve some of the challenges we encountered while designing the original dark color palette.
We’re calling our experimental color tool Primer Prism.
A sneak peek of Primer Prism
Part of GitHub’s Primer ecosystem, Primer Prism is a tool for creating and maintaining cohesive, consistent, and accessible color palettes. It allows us to:
- Create or import color scales.
- Adjust colors in a perceptually uniform color space (HSLuv).
- Check contrast of color pairs.
- Edit lightness curves across multiple color scales at once.
- Export color palettes to production-ready code (JSON).
Our workflow
Our improved workflow for creating color palettes with Primer Prism is an iterative cycle comprised of three steps:
- Defining tones
- Choosing colors
- Testing colors
Defining tones
We start by defining the color palette’s tonal character and contrast needs:
- How light or dark should the background be?
- What should the contrast ratio between the foreground and background be?
Although each palette will have a unique tonal character, we are mindful that all palettes meet contrast accessibility guidelines.
In Primer Prism, we start a new color palette by creating a new color scale and adjusting the lightness curve. In this phase, we’re only concerned with lightness and contrast. We’ll revisit hue and saturation later.
As we change the lightness of each color, Primer Prism checks the contrast of potential color pairings in the scale using the WCAG 2 standard.
Dragging lightness sliders up and down to adjust the lightness curve of a scale
Primer Prism also allows us to share curves across multiple color scales. So, when we have more scales, we can quickly change the tonal character of the entire color palette by adjusting a single lightness curve.
Adjusting the lightness curve of all color scales at once
Primer Prism uses the HSLuv color space to ensure that the lightness values are perceptually uniform across the entire palette. In the HSLuv color space, two colors with the same lightness value will look equally bright.
Choosing colors
Next, we define the overall color character of our palette:
- What hues do we need (for example: red, blue, green, etc.)?
- How vibrant do we want the colors to be?
We create a color scale for every hue using the same lightness curve we made earlier. Then, we compare and adjust the base color (the fifth step in the scale) across all the color scales until the palette feels cohesive and consistent.
A side-by-side comparison of every color scale
After deciding on the base color for each scale, we fine-tune the tints (lighter colors) and shades (darker colors). Blue, for example, shifts towards green hues in the tints and purple hues in the shades.
The hue, saturation, and lightness curves of the blue color scale
Fine-tuning color scales is more of an art than a science and often requires many micro-adjustments before the colors “feel right.” Check out Color in UI Design: A (Practical) Framework by Eric D. Kennedy to learn more about the fundamentals of designing color scales.
Testing colors
To test our colors in real-world scenarios, we export the palette from Primer Prism as a JSON object and add it to Primer Primitives, our repository of design tokens. We use pre-releases of the Primer Primitives package to test new color palettes on GitHub.com.
The dark color palette applied to GitHub.com
What’s next
We used Primer Prism to design several new color palettes, accelerating the creation of dark high contrast, light high contrast, and colorblind themes for GitHub. Next, we plan to improve our tooling to support the following key workflows.
Visual testing workflow
We plan to integrate visual testing directly into Primer Prism. Currently, visual testing of color palettes happens outside of Primer Prism, typically in Figma or production applications. However, we want a more convenient way to visualize how the colors will look when mapped to functional variables and used in actual user interfaces.
GitHub workflow
We plan to integrate GitHub into Primer Prism. Right now, it’s a hassle to edit existing color palettes because Primer Prism is not connected to the GitHub repository where we store color variables (Primer Primitives). A GitHub integration will allow us to directly pull from and push to the Primer Primitives repository.
Figma workflow
Our designers use Figma to explore and test new design ideas. We plan to create a Figma plugin to seamlessly integrate Primer Prism into their workflow.
Try it out
Primer Prism is open source and available for anyone to use at primer.style/prism.
We’d love to hear what you think. If you have feedback, please create an issue or start a discussion in the GitHub repository.
Warning: Primer Prism is experimental. Expect bugs and breaking changes as we continue to iterate.
Thanks
Huge shout-out to @Juliusschaeper, @auareyou, @edokoa, and @broccolini for their incredible work on the GitHub dark mode color palette.
Primer Prism was inspired by many existing color tools:
– ColorBox by Lyft
– Components AI
– Huetone by Alexey Ardov
– Leonardo by Adobe
– Palettte by Gabriel Adorf
– Palx by Brent Jackson
– Scale by Hayk An