Categories
General UX Bites

The Ultimate Guide to Designing for Dark Mode: 10 Essential Tips

Dark mode helps with reading, staring at the screen for hours like we do, reducing blue light, reducing battery usage, and decreasing CO2 emissions. But most importantly, it looks good.

We are currently witnessing a new era in UI design. I like to call it the rise of the Dark mode. It feels like bringing back the 80s but in UI. Websites are straight up refusing to let you switch to light mode, or they’re only available in dark mode.

Dark mode helps with reading, staring at the screen for hours like we do, reducing blue light, reducing battery usage, and decreasing CO2 emissions. But most importantly, it looks good. There is multi-designing for the dark web, I mean dark mode, then inverting the colors. So instead of this, you want to get this, or this, or this.

So here are 10 things you should keep in mind.

Design for the dark

The dark mode is not just a theme among different themes; it’s a standalone design with its own elements or visual effects. For example, you often don’t see many background gradients or gaussian blurs in light mode, but there are plenty in dark mode. So even if you’re coming from light, contrast, design for the dark.

Contrast

Let’s say we’re using these colors for the light mode. We might not be able to use the same for the dark mode because then the contrast ratios would not even pass the minimum web accessibility level of double A. So we need to modify these colors and increase their contrast, which brings us to point number three.

Lightness and saturation

When you’re trying to fix the contrast issues or modify your colors for the dark mode, you should avoid saturating as much as possible and instead try to increase the lightness or desaturate the colors. Take this little button for example. When switching to dark mode, we obviously can’t use the same one because of low contrast. So we need to increase the contrast. We can either increase the lightness based on the hsl value or both desaturate and increase the lightness.

Colors have a purpose

You can modify your button for the dark mode and completely change it, of course. But what button is that? Is it the main call to action? Is it secondary or tertiary button? Or is it the little dimmed subtitle or the huge important headline? Is it the icon for the selected tab or another less highlighted icon? Each color in your style guide should represent a purpose. So instead of white, black, blue, and red, you should classify them as primary, secondary, tertiary, disabled, enabled, warning, success, and whatever action represents or purpose it serves.

Readability

What’s more readability contrasted than black text and white background or white text on black background? That’s like a 21 to 1 contrast ratio. That’s the best you can do, right? Well, yeah, but pure black for either text or background can cause an effect called halation, which makes the text a bit fuzzy and hard to read, especially for some visual conditions like astigmatism. So instead of pure black, try to use a different shade while making sure the text is still contrasted enough.

Background and shadows

You know how we add little shadows to our boxes or cars to kind of contrast them with the background? For the dark mode, we can’t use white shadows and dark shadows cannot create the equal amount of contrast unless your style is neomorphic. And in that case, the shadows are actual shadows, you know? But normally, we can use a lighter background color for the cards, add a little border effect, a gradient, or a cool little background effect.

Muted colors

Remember when I asked if these colors are the same? Well, the answer is no. The right one is a muted version of the left one, which means it’s just a bit darker and less saturated. For the dark mode, we usually don’t use vivid colors but try to make them muted. A muted color is basically the vivid color and gray, black, or white had a baby. We usually see colors a bit brighter on dark backgrounds. You’ve probably seen the Adelson Checker Shadow illusion, which shows the same shade of gray but the one surrounded by darker squares feels brighter. Look at this toggle button on Reddit. They look the same, but in reality, they’re not. The one in dark mode is muted because otherwise it would feel a bit too bright to create enough contrast with the white switch.

Minimalism

The whole point of using dark mode is to keep things minimal so we can focus only on the important information. So don’t go trying to make everything colorful. If it’s a landing page, you can add border effects, gaussian blur, a relatively large text, or a light coming from the heavens. If it’s a text, forget about it. Keep it simple.

Depth

Darker or lighter layers generally represent elevation. So when you make a card lighter than others, you make it bold, you know? You make it pop.

Colors

Stop using purple. Just kidding. Use whatever color that matches your branding. If you watch this far and you feel like you could use a little playground to test your dark mode colors, real-time colors could be useful. This is your sign to join the Dark Side. And that’s all for this video.”

By Hrushikesh Paygavhan

UX designer at Customer Capital. With 7+ years of Design experience, I belive in passing the knowledge to everyone. I help UX designers upskill themselves, and stay updated in the design field.

Leave a Reply

Your email address will not be published. Required fields are marked *