Unlocking Dark Mode
All the things I have experimented with this trend thought the webs & apps
Using dark color schemes in the UI design is nothing new nowadays. However, it was in 2019 when the dark mode became one of the hottest design trends.
It seems like users have again crazy over the dark theme after getting back mode options in Mac OS, Apple iOS and android as well as across popular apps and platforms. It’s very tempting to jump into this design trend, but we really need to know how to do it the right way.
Why we love dark mode?
many of us like it because it reduces eyestrain and improves reliability in the nighttime hours. It also prolongs the better life of your smartphone (because it drastically reduces consumption) and as for the interface it emphasises visual content and the overall emotional appeal.
But there is some blind spots which puts a strain on user’s eyes
- It is harder to use in well-lit areas.
- It doesn't work for text heavy pages.
- Light mode contributes to better performance and concentration
Dark mode it’s also not a good fit for text heavy pages besides research suggests that while dark mode may represent some advantages for users with visual impairments, in users with normal vision the light mode is what leads to better performance and concentration.
You might have noticed that many movie streaming and game streaming services have dark theme, and there’s a simple explanation to that: as people mostly use these websites in the evening and they are viewed from a distance of 6 to 10 feet in dimly lit rooms plus colourful content sends out the way better.
On the other hand, using dark mode is a bad idea for techs which have data heavy projects. It mostly works well for simple pages with bits of text here and there.
Maintenance
Dark mode makes it challenging to maintain: you have to be conscious enough about contrast and readability. I would say not to use 100% black because experts suggest that using dark grey is much better than pure black. Dark grey provides a broader range of dots according to also reduce eyestrain.
Don’t use overly saturated colours as they don’t pass the VC AG’s accessibility standards for body text contrast against dark surfaces. Also they can induce eyestrain since the visually vibrate against a dark background.
If you didn’t know there are tools to check the contrast ratios, for example contrast accessible brand colours and texts. So, be sure to use those tools to make your design even better. Avoiding shadows should also pull a visible on the majority of dark mode elements
The Nielsen Norman group strongly recommend that designers allow users to switch to dark mode if they want
6 Dark theme tips for UX/UI
1. Always use a dark tone (#121212) vs. pure black (#000000) [However, pure black is used by Apple in their dark mode]
2. Use less saturated colours palette to ensure your design is accessible and legible. Connecting highly saturated colours with dark elements makes your user’s eyes bleed and hurt.
3. Use opacity rangers on elements like tags to ensure components match your dark theme
4. Elevate with white: to elevate an element, use white objects with different opacity. Do not elevate with fancy shadows or different dark shades.
5. Avoid inverting do not invert shadows. They will go from black to white and will look cheap and weird. They will become a glow, not a shadow.
6. Accessibility first: the biggest trap of dark mode -accessibility. Dark Mode is better for the eyes, but only if applied correctly. Mind the contrast!
