Dark theme is one of the most hyped design trend on internet nowadays. Well, even if one doesn’t use it permanently, its like a luxury which everyone likes to have in their apps. It was luxury a little while back which early birds offered in their apps to be differentiation, now everyone does it in their apps, as it has become a must have feature, regardless of the fact that its used widely or not.
But, did you know who introduced it ? who were the ones taking the risk of going all dark ? Who came up with this idea ? Where did it all come from ? What are its benefits ? Let’s unravel the history behind the dark mode and let’s explore how you can benefit in your applications from it and most of all, how to implement it ?
Who were the first users of dark mode ?
Yes, teachers and students. Chalk and slate teaching methods dates back to 14th century ! Even now, one of the most used teaching method is slate and chalk.
But Why ?
It all tracks back to how our ancestors used to hunt ? Early man used to hunt in daytime when the light shines bright in the background and prey being in front of the light, over the time, eyes got good at finding dark objects. Then came the method of showing text on dark objects like stone to showcase some kind of text recordings, which all resulted in using high contrast white color chalk on the slate, used world wide as primary method of teaching world wide in every school.
What looks best on dark mode ?
Dark mode is best for charts and visualizations, but not with too many colors or colors with high contrast. Material design guidelines recommend using more of grey than full back color, to express elevation and reduce strain in eyes bye too much of contrast between light and dark.
It is not only much more readable but works best for users with low vision as its easy to see contrast on dark than light.
Okay, so is dark mode really needed for my app ?
If question was asked in 2019, answer would be maybe ! But 2020 and beyond, its a must have ! Dark mode, not only makes your app stand out from others, but is much more accessible, saves energy of devices with OLED screens and improves focus. If you see most used extensions or themes on developers IDEs, its dark mode!
Where and how can I make my website dark ?
Its just another theme ! I wish it was as simple as that, but dark theme has its own guidelines and if not done right, can turn out worse!
- Use colors with low contrast in dark mode.
2. Don’t use 100% black as background.
3. Don’t use light glows in place of dark shadows to express elevation.
Okay, so that’s all good when you are doing it for an existing app, but what if i am starting from scratch ?
“Designers know it all” leave it to designers, but often that may turn out to be a costly affair. a suggestion that you can take from this blog is, reuse something existing! Yes, sometimes its best to leave it to professionals, hence many such templates, starter app, or themes available out in the market which can help ease your app development not only with lots of ready-made components but well designed dark mode for them! One such template for website or mobile app is MOZART Angular PRO Admin Template, which is based on Angular ! and best part is, unlike others they offer mobile app framework baked into Angular app, 2 commands and you have IOS and Android app ready with Dark mode for you !
What are the Pros of Dark Mode?
While dark mode is more than good to have feature in app and is often overlooked and called as luxury, there are some great cons to it:
Due to contrast, there is a special awe to content with lighter colors and is often well received due to its nature of soothing light on eyes. Not only that, some font, often smaller ones are better readable with dark mode, as compared to light mode.
Above picture looks much more mesmerizing on dark theme, do you think light theme would have same justice to readability or overall looks to the app ?
