Light Theme, Redeemed
This is a story of light theme’s redemption. So sit back, remove your protective eyewear, and let’s go on a journey. Maybe you’ll even find yourself using light theme in the coming days.
The Rise and Fall
That said, you probably don’t use light theme today. In fact, there’s an overwhelming chance that you use Discord’s dark theme if you’re a Discord user. As of this writing, the percentage of Discord users on light theme is in the single digits — and not even the higher ones.
To understand light theme’s fall from grace, we must go back to the earliest days of Discord — 2015. Most people don’t know this, but the earliest versions of Discord contained only one theme.
Light Theme.
Then, everything changed on August 6th, 2015. You remember how you were the center of attention until your younger sibling came along? They were easier on the eyes, resonated more with your friends, and — I’m not sure this metaphor is working anymore — dark theme was released to the world.
Dark theme quickly became the main theme. Even within our office, it was hard to find more than one or two actual light theme users. Our small team of designers didn’t design with it in mind when creating new features. It became an afterthought. Testing on light theme was rare, and considered a chore.
Light theme began to atrophy due to this way of thinking, and we’re embarrassed about that. So what did that lead to?
Rock Bottom
It eventually became a Discord community inside joke that light theme was bad and you were bad for using it. Kotaku even wrote an article about it.
There are dozens of Reddit posts in our subreddit about the shortcomings of light theme, along with some pretty good memes, like this one:
We even joked about it occasionally:
Ultimately, working on light theme sucked.
“Why work on something that barely anybody uses, that we get made fun of for, and needlessly slows us down?”
On more than one occasion, we debated removing the theme entirely. Then, in April of this year, we kicked light theme while it was down.
We “deleted” light theme as an April Fools Day joke. We thought it would be funny to poke fun at ourselves for one day — and many dark theme users agreed.
While many had laughs, this wasn’t all good. We did not account for the users that preferred light theme for accessibility reasons. Many angry light themers gave us a piece of their mind. Acknowledging our mistake, we turned light theme back on earlier than intended.
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.”
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.
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.
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:
There are some tradeoffs where the contrast is increased, but still fails contrast tests for certain small text. We’re considering ways to alleviate that, such as increasing contrast on hover in the future.
3. Give light theme an appropriately-themed sidebar.
4. Lastly, establish a system for designing and building light theme that would be easy to design and test, to prevent problems in the future. Two things we’ve implemented so far are Color Mappings and an Auto-Themer plugin for our design tool, Figma.
Color Mappings
One way we made light theme easier to work with is a color mapping system. Previously, we would design for dark theme and then duplicate the design and apply colors as appropriately as we could for light theme. This would result in some pretty different designs depending on the situation and the designer doing it. This new mapping system will help us not only create patterns between the themes, but establish patterns within the themes.
For our background mappings, we established how colors would look on each theme in various areas, such as backgrounds, divider lines, cards, and more. This isn’t a perfect system, as there are plenty of one-offs, but this takes us 80% of the way.
The above foreground mappings are for text and icons. While building this, we made sure to do some accessibility testing on our range of backgrounds. We had to make a few tradeoffs where some text (namely, muted channel names) will not pass accessibility tests.
Furthermore, these mappings get applied as CSS variables in code. What this means is that when an engineer starts applying colors to new components, they’d give the component a single variable like --foreground-1 that assigns color depending on the theme. Previously, if the light theme color was forgotten in code, it’d fall back to the dark theme color and look completely wrong. Now, that should no longer happen. A bonus point: If we choose to adjust the mapping, this would ripple through the app with a single change. Variables!
While we haven’t applied this mapping system to every surface of the app, we’re getting closer and will eventually fully implement it as the app is further redesigned and rebuilt.
Auto-Themer Plugin for Figma
Now that we implemented a mapping system, one of our designers — Daniel — had an idea: can we automate it? Turns out, you can.
He quickly threw together an amazing tool for us — a plugin that looks for applied dark theme styles and converts them to light theme styles based on our mappings.
With these systems and tools in place, light theme will be way faster and easier for our entire design team to work with moving forward.
What’s Next
- We’re sure there will be feedback and things to learn after this release. We’ll be listening and looking for ways to improve.
- A similar new light theme look for iOS and Android.
- The next phase in our redesign. We can’t tell you what or when, but some parts of Discord that need love will be getting it soon.
Thanks for reading!
We’re always looking for the next great addition to our product team at Discord. If you are passionate about design, user experiences, and keeping light theme a first class citizen, hit us up.
