facebook

5 Tips for Dark Theme Design

Author: sunandesignstg

One of the most requested features in UX and design, the dark theme has become increasingly popular over the past few years. 

With Apple and Google both making the dark theme an integral part of their UI, other companies and apps quickly followed. 

The reduced stress on eyes (and battery life) because of the decreased luminance became the main reason behind the theme’s popularity. 

As a designer or marketer, here are five super important tips to keep in mind when designing a dark theme for your client or product! 

1. Avoid pure black or saturated colors

There is so much more to a dark theme than just white text on a pure black background. That has the very opposite of the soothing effect a well-designed dark theme should have. 

Instead, it’s much more ideal to go with a softer dark gray – light text on gray is simply more comfortable for the eyes because of the reduced contrast. You can also express an extensive range of depths and shadows on gray. 

Much like the sharp black and white, saturated colors can have the same jarring effect. You can desaturate primary colors, or go for lighter shades. 

2. Use color contrast cautiously 

Make sure your content is comfortably visible by using a standard contrast level – 15:8:1, as recommended by Google Material Design. 

3. Communicate depth

As with a light theme, it is crucial to communicate hierarchy in a dark theme. 

Unlike light themes, however, shadows cannot be used to communicate elevation as they don’t work that well on dark surfaces. 

Instead, depth can be utilized to display how high or low an element is within the design. 

This is where the grays come into play. The ‘higher’ an element is, the lighter it is shaded, and vice versa with the darkest shaded elements being the lowest in elevation. 

4. ‘On’ colored text

Keeping with the depth hierarchy, always make sure that your text is of an ‘on’ color – colors that vividly appear ‘on’ top of surfaces. 

While the default is white (#ffffff) and jarring, you can darken it by playing around with the opacity. Ideal values: 87% for high-emphasis, 60% for medium, and 38% for disabled text. 

You can also opt for three versions of a light gray if it suits your fancy. 

5. Always test in both light and dark

While it’s not a hard and fast rule that both light and dark theme UXs should be the same, it is still ideal to have them be as similar as possible. 

The best way to achieve perfect compatibility is to test every element in both themes to ensure everything works in perfect harmony. 

Testing both themes in both light (daylight, incandescent lighting) and dark (after sundown, night-lamp, or pitch black) will help you achieve an extremely comfortable design. 

That’s all folks! 

If you’re still having trouble, or need any help along the way, don’t hesitate to reach out! 

At Sunan Designs, our team of expert designers is always ready to help. All you have to do is relax and let us design an awesome dark theme for you! 

 

Hey there! I hope everyone is doing well. Welcome to the next round of the Sunan Weekly Roundup!...
When it comes to effective email subject lines, every word counts. You need a combination of wit, value,...
“There’s a famous quote by Dr. Tori that goes, ‘Influence isn’t just about making a point; it’s about...
In the social media game, brands flock to platforms promising instant visibility: Instagram, Facebook, TikTok, and X (formerly...
Hey there! I hope everyone is doing well. Welcome to the next round of the Sunan Weekly Roundup!...
Hey there! I hope everyone is doing well. Welcome to the next round of the Sunan Weekly Roundup!...
SEO, AI
Search engine optimization (SEO) has dramatically evolved over the years, with the rise of artificial intelligence (AI) adding...
In the ever-changing world of digital marketing, staying afloat can feel like chasing a mirage. Just when you...
Crafting a content campaign that’s both simple and unique is an art. You don’t need a complex formula—just...