Dark Mode UI Conversion.
Learn how to convert your regular UI to Dark Mode Design.
Why convert into Dark mode?
- It saves the battery life of the device. Google confirmed that dark mode on OLED screens has been a game-changer for the device’s battery life.
- It provides less strain to the eyes, especially in low light conditions. This prevents instances of tiring and drying of eyes with prolonged mobile phone usage. By not being contrasting, it becomes easier for users to scroll through the application in the dark.
- Currently, the Dark mode is in trend, and thus every big name in the market such as Instagram, Outlook, etc. have their own Dark theme. Dark UI is the one design element that has been in demand for the past couple of years.
The basic tips and tricks for conversion into dark mode:
Dark themes have been the most requested features nowadays. Both Google and Apple have focused on their dark mode design standards for providing a healthy user experience. And thus, it is important to know the effective tips for dark theme design.
The dark mode should not be derived by inverting the current default/light theme.
It’s not easy to build a nice dark theme. You can’t just reuse colors or invert the shades. If you do, you will get the opposite of what you need.
Inverting shades and reusing the accent colors will maximize eyestrain, make it more difficult to read in low light, and even may break data and visual hierarchy.
Avoid Pure Hues (the technical term for color), ie True black(#000000) or Pure White (#FFFFFF).
A dark theme must not be of pure white text on a pure black background. It can be hard to explore at a high contrast screen.
Thus, it is safest to use dark grey as the primary color for the dark mode components, as it lowers the eye strain, and also it is a lot easier to look at shadows on a grey surface compared to black.
Google’s Material Design recommends using #121212 instead of #000000 whereas Apple’s Design kit has #1C1C1E as the dark Background.
Avoid using Saturated (the amount of grey in a color) colors on dark UI.
Saturated colors vibrate against dark surfaces visually and cause readability issues. Hence, to make the contrast sufficient against the dark surface, de-saturate the main colors.
Pro Tip: Use the Color Scale (third party plugin) in XD to construct your own saturated color palate.
Proper use of Opacity for Colors/Text Colors.
For a dark theme, the default Text color is pure white (#FFFFFF). But it’s a bright color and would vibrate visually against dark backgrounds. For this reason, Google Material Design suggests using a little darker white.
- The disabled text utilizes darkness of 38%. Thus, change Opacity to 38%
- At 60%, medium-emphasis text is executed, Thus, change Opacity to 60%.
- High-emphasis text must have the darkness of 87%, Thus, change Opacity to 87%.
Design keeping in mind to Make Distant Surfaces Darker.
We consider that a light source is cast from above in this model. Thus, If the layer is closer to the user, the surface area becomes lighter. And if the layer is distant, it gets less light and recedes more into the background.
Simply inverting the present light theme while making a dark theme won’t help. Also, closer surfaces would become dark and distant ones would become light. By breaking the material design rule, this would feel unnatural.
Instead, use just the light theme’s primary surface color. Then, invert the color to create your dark theme’s primary surface color. Now make this color dark for distant surfaces and light for closer surfaces.
Check contrast and legibility(capable of being read or deciphered with ease) of the Text used.
While Choosing the text color use the following Contrast checker Tool for adhering to the web accessibility guidelines. The contrast ratio to pass accessibility is 4:5:1.
Another Tool which follows WCAG 2.0 guidelines (Web accessibility)
I have referenced Google’s Material design guidelines for Dark mode and Apple’s Human Interface guidelines for the same. The links for the reference are provided below:
