The use of digital technology is increasing with tech revolutionization. We spend almost 10 hours of the day sitting in front of a digital screen. Our lives have become more accessible due to the impressive development of different apps, websites, and digital gadgets. But as a result, we all are also facing many health concerns – the major one is the sight issue. So, what can be done in such a situation? Adding a dark mode option!
Seven Tips For Dark-Themed UI Design
One of the most requested features in recent years is the dark mode. A dark mode has been deemed a requirement for UI by both Apple and Google. Reduced brightness in a dark environment offers safety and can reduce eye strain. You have decided to go for dark mode, but do you know what aspects you must keep in mind?
Here I have shared seven tips you must remember when designing a dark-themed UI.
1. Avoid Saturated Colors
In contrast to dark surfaces, saturated colors can visibly vibrate, making them more difficult to read. Saturated colors can appear beautiful on bright surfaces. Desaturate primary hues to create adequate contrast with the black backdrop.
Use lighter colors (in the 200–50 range), as they are easier to read on surfaces with dark backgrounds. Lighter variations allow you to retain proper contrast without putting too much pressure on your eyes and without reducing the visual impact of the UI.
2. Dark Theme Doesn’t Mean #000000
Simply be mindful of not using pure black; how? You can use the variations of black, like mixed with grey or other shades, to soften the contrast between the text and background. It makes information easily readable. Be careful of how you play with these shades – as the low contrast can feel uncomfortable.
3. Don’t Overlook the White Space
Screens usually get overcrowded due to buttons, illustrations, videos, and other designs. Hold on! Give your design some room to breathe so that your app won’t appear cluttered to the user. What we call an extra room is known as “White Space.”
Wait, you think I am off-topic? I am still talking about dark mode! The dark mode also needs white space, and it looks better with some empty rooms. In fact, dark UIs need more space than white-toned themes.
4. Communicate Depth
Shadows behind shapes are frequently used in light themes to draw attention to an object. However, because there isn't enough contrast between the design feature and the shadow, these shadows don't appear in dark mode. Instead, you can simply apply a lighter fill for the things you want to appear higher to add depth. Drop shadows on dark backgrounds are unnecessary; let the color do its work instead.
5. Use “On” Colors for The Text
“On” colors come on top of components and key surfaces. Usually, they are used for text.
Pure white (#FFFFFF) serves as the dark theme's default "on" color. However, since #FFFFFF is a vivid color, it might appear to "vibrate" against black backgrounds. Google Material Design advises using a slightly darker white because of this:
· Text with a lot of emphasis should have an opacity of 87%.
· Text with medium emphasis is used at 60%
· The opacity for disabled text is 38%
Keep in mind that light text on a darker background can look bold than dark on light. Therefore, you should use lighter font weights for dark mode.
6. Allow Users to Switch
Allowing the system to control when to turn on or off the dark theme is alluring. However, poor UX may result from this design decision. By doing that, you are removing the user's ability to make decisions in favor of the system.
Because of this, it's preferable to avoid using auto-enabling a dark theme. Allow users to activate (or deactivate) the dark theme using a UI control. Users should be allowed to choose a mode based on their requirements manually. The mode switcher needs to be positioned and designed.
7. Test In Light and Dark Settings
Check out your UI in both settings and then tweak your designs to fit each one as necessary. Consider conducting incandescent lighting testing on your product after sunset.
Final Takeaway!
Creating a dark theme involves more than just altering the backdrop. Colors can defeat your purpose if the contrast and spacing are off. Play around with the colors, text's opacity, and arrangement of your design pieces. Go nuts!