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!
