If you’ve been exploring my site, your attention may have been drawn to the little moon icon in the bottom left of the screen. Have you clicked it yet?
This little button toggles the site between light mode (white background with black text) and dark more (black background with white text).
It’s a feature that’s been around on your iPhone for a while, but now it’s starting to creep into more and more website designs.
Is dark mode an option you should consider for your next project? Is it just a gimmick or does it actually add value? How do you even go about building it into a website?
What are the benefits of dark mode?
When done right, dark mode can be super easy on the eyes, but did you know it can also save battery life on your device and maybe even keep you healthier?
Reduced eye strain
There are actual conditions associated with excessive screen use, with symptoms including eye pain, blurred vision, headaches, double vision and more. In many cases switching to dark mode can quite literally help reduce that pain.
Better visibility in low-ambient lighting
You know that feeling when you step out of a dark room into the bright sunshine? The same thing happens when you’re working at a screen late at night or in a dark environment. Dark mode reduces that bright light and makes it easier to see things in low-light situations.
Saves battery life
Certain devices with OLED screens can switch off black pixels when they’re not being used. Dark mode uses an increased number of black pixels, therefore causing the device to use less energy.
Giving your users a choice
We always talk about responsive design and how we can serve your website design to different screen sizes. But what about responding to a users personal preferences? Beside the tangible benefits of dark mode, some people just straight up prefer it. So why wouldn’t you give your users the option to view your site in a way that best suits them?
That being said, there are plenty of people out there who don’t like dark mode. Adding a simple toggle switch to your site and allowing your users to change between light and dark modes will give them the power to choose for themselves.
Shouldn’t it be on every website?
Not really. Some designs simply won’t work in both dark and light. If you have a heavy use of colour or a really content heavy design, that might not translate into a dark mode design.
There are emotional connections to colours, both bright and dark. If your brand uses bright colours to motivate and inspire, switching to a dark mode may have the opposite effect.
If you have to compromise your design or your brand aesthetic to achieve a dark mode, it’s probably not the right choice for you.
On the flip side, if you have a brand pallette that already lends itself to a dark mode, that’s the perfect opportunity to build it into your website.
How do we do it?
If you’re wanting to get technical… let me walk you through how I add this clever little toggle switch to my websites.
First up is the creation of the icon or button – it needs to be obvious without taking the focus away from your actual content.
Once that’s in place, it’s a simple bit of jQuery code that adds a special class to the body of your website when dark mode is enabled. It’s also built to remember your preferences as you flick between pages.
Then it’s down to the CSS. For every element on the site, we have to specify how it will look in both light mode and dark mode.
Show me some examples…
Well, you can see it right here on my website (just tap on that little moon or sun icon) and you can also see how I implemented it on Contour Design Studio’s website.