Dark themes are becoming every day more and more popular. In a certain way, having a dark interface is quite mandatory nowadays, not only for the new software and OS that allow you to choose which theme to pick. The question now is, of course, how can we design an effective “dark theme”?
Before diving into this, let’s understand first why a dark theme is so important…
Why a dark theme
Dark themes, as said before, became quite popular in the last years not only because of the feature on some mobile devices and other OS, also because Apple and Google integrated dark themes as the main element on their UIs; moreover, they provide safety in dark environments by reducing eye strain and the theme’s reduced luminance (good thing for the night owls out there).
Now let’s see what is mandatory to keep in mind when designing a dark UI theme…
Avoid using pure black
If you think a dark theme should be pure black with pure white text, well… think again.
There are tons of shades that can be used for creating spaces and hierarchy, only with black and white shades.
The main reason why we should avoid pure black or pure white is that this is going to create big contrasts that could end to give some string to who is looking at our interface, and the last thing we want is potential customers leaving our website or app.
Greys and light white shades reduce a lot of eye strain and give a nice overall experience and conform when someone is looking at them.
Moreover, material design recommends #121212 as the main value for our surface.
Don’t saturate it!
I personally am a fan of saturated colours and, if used properly, they can really stand out on our interface.
But, since we are talking about dark surfaces, we MUST consider one of the basic rules of colours which is “every colour will vibrate and enhances on dark surfaces” and saturated colours will vibrate more, of course.
The best practice, as material design says, is to use this case lighter colours, between the 200-50 range for their better readability on dark surfaces.
If you play well with placements, shapes and colours your UI won’t lose expressivity and, moreover, it will not cause eye strain.
Maintain colour contrasts standards
Following the topic above, be sure your colours are comfortably readable on your dark surfaces and the surface must be dark enough to display white text.
Google Material Design recommends using a contrast level of at least 15.8:1 between text and the background.
You can also use some colour contrast tools to check this feature.
On means on
On colours are the ones that appear on top of the other ones used in the dark surfaces and they stand for something active.
Naturally, 100% white is the default “on” colour when working on dark surfaces, but at the same time it could vibrate against the background (choose it wisely).
Google material design is giving this hint about the amount of opacity we should use:
- High-emphasis text should have an opacity of 87%
- Medium emphasis text is applied at 60%
- Disabled text uses an opacity of 38%
Another quick tip: light text could appear bolder against a dark background, so better to use lighter font weights on dark mode.
Always considering the emotional aspect of your design
This is probably the most fascinating aspect of dark themes… A colour can change its meaning accordingly to the background where it has been placed, and usually, a light background tends to reduce its shine; vice versa, a dark one will increase that factor.
But not only this!
The emotions that a dark background or theme can awake are totally different than the ones created from a light one: so when designing a dark theme, keep it in mind and sometimes “go with the flow” instead of “keep consistency with the light theme” because it won’t work.
So simply remember that
Colours are actually perceived differently depending on their background
And
A dark mode does not (always) have to be derived from the existing light theme
Depth and hierarchy
When creating UI elements, we always have to give them the right hierarchy inside the structure.
One of these ways of giving hierarchy is, without doubt, the depth and the way we express elevation. On a light theme, we go with a shadow, for instance, to show that a button is right above anything else on the page. On dark themes, we can use the same concept plus the shine of colours.
Design shapes and areas by keeping in mind this: the “whiter” at the top. And if we need to add more spice on that box, a little dark shadow.
Freedom
Users should be free to switch from dark to light theme and vice-versa: allow this on your user settings by using a switch, toggle or any other element (Telegram uses a sun and moon icon for instance).
Also, this means that your “light theme” UI should be ready to go and follow some other parameters in order to be comfortable and easy to brwse, but we will talk about this next time.
Above, how dark and light theme changes side-to-side (UI design by Sergey Zolotnikov originally posted by Nick Babich).
Testing
As always, a great design is not new but it has been seen around and tested since day 0. A good piece of advice is to check your dark theme when is sunset time, you will feel it when some colours are too much or there’s something missing too. So yes: test your design, both light and dark UIs.
Did you enjoy this article? Share it!
