facebook

5 Tips for Dark Theme Design

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! 

 

AI
Video content has become the most popular way to capture audiences' attention on social media and beyond. In...
It is essential for non-profits to keep an eye on their performance to ensure that they’re making the...
Social media is an essential tool to help you spread the word about your non-profit. To maximize the...
Having strong supporters is the backbone of any non-profit. As a leader, you want to ensure that your...
The role of AI is growing beyond the hype and into a practical necessity for most businesses in...
Despite being amongst the most recently launched applications, TikTok has exploded in popularity thanks to its unique content...
In the past few years, mental health campaigns have gained significant traction, and it is not hard to...
Artificial intelligence (AI) is becoming increasingly popular in design despite its relative recency. The technology can help you...
Let’s face it… the digital space is now saturated with companies competing for consumer attention. Whether it is...