How to Make a Great Dark Theme

Dark themes are cool but you can’t just slap a dark background on light text and call it a day! To make anything that is remotely good looking you’ll need to keep a few things in mind. The main thing to keep in mind is contrast. Read on if you want to get contrast done right.

Things to keep in mind when making a dark theme

There are a few things to not do when making a dark theme. If only things were as simple as making the background light and the foreground white!

Don’t use saturated colors

Saturated colors are pure colors. An example of this would be pure red (#FF0000). Dark themes work best with desaturated colors. A great example (which i will be repeating over and over and over…..) is Discord. It only uses shades of gray + occasionally using blue for calls-to-action.

Imagine using a dark theme and it being completely colorful. The thing is people have come to expect a dark theme to be something that isn’t very colorful. Just make sure you have a bit of color in there if all you have is 2 colors that will be too boring for users.

Avoid Pure White/Black

Pure whites for text can be disorienting and can strain your users eyes. Instead of using a full white use a light gray for text. We will need to wait for everyone to start using OLED or QLED before we can use pure blacks and whites and still have them look good. Until then we’ll need to avoid pure whites/blacks.

If you want a good example of how awesome a pure color app can look check out this website with an OLED screen

Too much or too little contrast

The thing you want to keep in mind with contrast is that you need a certain amount of it. The easiest way to check if you have enough contrast is to take a look at the app you’re designing on two or more devices.

That way you’ll be able to avoid problems related to a poorly calibrated screen.

Make sure you comply with WCAG Standards

WCAG — or Web Content Accessibility Guidelines — Are a set of guidelines that in a nutshell make sure that your app can be accessible to everyone. Installing an extension on your browser to make sure you meet these guidelines is a way to easily make sure that your dark theme has enough contrast.

My favorite way to check contrast is to just use Google Lighthouse.

Keep your alignment and spacing the same

Imagine if you use an app and you set dark mode on. Then suddenly the button widths on the buttons change. At best something like this will leave your users confused. And at worst they will think that you have horrible design. If a user is expecting a color change don’t change every design aspect of your app.

Think about it: Imagine ordering donuts and getting pizza instead. Not fun.

Examples of great dark themes

A few examples that come to mind when thinking of great dark themes are Discord, Google Keep and YouTube. Here are a few images

As you can see, Discord uses lots of panels with different shades of gray to give off that really cool look. It’s a nice approach but if someone with bad vision like me uses your app he might not notice for months!

With youtube and google products in general. They use really safe design eg: not much color and complies with WCAG nicely.

The same thing applies Google Keep

You get a sense of dejavu — french for already seen — If you’re getting a sense of dejavu when using an app suite from a company then their designers are doing their job properly. Of course they do their hiring the best designers LOL!

Make sure you use your brand colors

While sometimes using brand colors on a dark theme can be a bit hard, usually you can convert the color to HSL and just increase the Lightness.

Here’s a video that explains HSL & other color types.

That way you can keep your brand colors with your dark theme. You get your cake and eat it too!

Welcome to the dark side!

Originally published at https://valuegrammer.tech.