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! 


As the holiest month in the Islamic calendar approaches, brands around the world gear up to connect meaningfully...
For a non-profit, it is essential to maximize every traffic avenue to make sure that you’re putting your...
With the global Muslim population surpassing over 2 billion in 2023, global brands are starting to recognize the...
Short-form content has truly taken the world by storm. Thanks to the popularity of social media platforms like...
The holiday season is a time of joy and giving. While we all come together with our families...
The holiday season is one of the best times of the year for enterprises. While everyone comes together...
Giving Tuesday has become one of the most popular days of the year for activists and non-profits. It...
In today’s digital economy, shopping is becoming a personalized experience for everyone. Whether you’re browsing the shelves of...
The growth of artificial intelligence (AI) has completely changed the way businesses function in the modern world. Products...