A Second Chance

After realizing we made an embarrassing error, we felt energized to make things right. A small two person crew of an engineer and a designer had been working through a total refresh of Discord’s interface — and underlying code — over the past half year (if you’re an eagle-eyed Discord user, you may have noticed changes to the top bar, server list, and channels list in the past months). We decided that the next step for this crew was to give light theme the face lift it needed.

We also needed to find a way to change the culture around light theme. We needed make it easy and fun to work on light theme, or at least build it in such a way that designers and engineers wouldn’t have to think about it.

Listening to the Community

We had some ideas about how to fix light theme, but we needed actionable data. After looking into our internal data about light theme usage, we perused the dozens of results about light theme on our feedback site. We gathered hundreds of survey results from an April Fools Day post-mortem in our /r/discordapp subreddit and our dedicated Discord Testers server. We even spoke to the two light theme employees at Discord. (Hi Christine and Bonnie!)

A large majority of survey respondents said the dark sidebar in light theme felt out of place. Many people were used to how light themes look on other apps and wanted consistency.

“As many have probably already said, make the sidebar light on light theme, it would be a great thing to start with.”

Discord’s (now old) dark sidebar on light theme.

Another large majority of respondents had problems with the low color contrast between the text and background color in chat. Many people said the same thing about dark theme’s contrast as well.

The contrast isn’t sufficient on the dark theme for me to read anything. This is an issue regardless of monitor settings.

It’s true. Discord’s chat text only registers a 4.07:1 contrast ratio on light theme.

A few users surfaced other accessibility issues, specifically ones related to our grey text on a white background, or trouble with dark theme’s dark background.

I find that dark colours tend to ‘swallow up’ lighter colours, especially given that Discord’s text has such narrow lines. Because of this it’s very difficult to read and I have to strain my eyes, which starts to cause a headache after just a few minutes.

The Result

From this, we knew that we had to do 4 main things:

Develop a new color palette with more pleasant light tints.

We forked our primary color range into two palettes. One for dark (top) and one for light (bottom).

2. Improve accessibility by increasing contrast levels and bumping up small and thin fonts — on both themes for good measure. Here’s what we did: