Now's the time to implement dark mode on your website
Roughly a 3 minute read by Adam
Dark mode was the hot new trend of 2019, delighting tech and design audiences with its slick, minimalist feel. It’s really hit the mainstream this year, with many popular apps across all sectors announcing a dark mode feature.
Why is dark mode important?
Originally created to improve readability and reduce eye strain in darker surroundings (brilliantly called out in WhatsApp’s launch ad earlier this year), dark mode has leapt into popular use for other reasons as well.
We now know that blue light suppresses our melatonin secretion, disrupting our sleep cycle - making dark mode an advisable option for those of us who clock a lot of hours staring at our devices. But for all the practical benefits, ultimately a lot of people just prefer the way it looks (including many of the Engage team).
Whatever your reason for loving dark mode, there’s one big technical advantage - up to 60% power savings on OLED devices
Whatever your reason for loving dark mode, there’s one big technical advantage - up to 60% power savings on OLED devices! This is a big consideration, not just for tech addicts who want to squeeze every second out of their smartphone, but for digital businesses who are concerned with reducing their carbon footprint.
How are we implementing it?
We’ve already started experimenting with ways to be more sustainable in the way we work, so this piqued our interest! It goes without saying that as a digital-first company we’re always keeping one eye on new web functionalities, and last summer dark mode support came to browsers through the prefers-colour-scheme media feature.
Fully detailed on Google’s developer blog, the query detects the user’s preference for light or dark mode, and allows developers to code their site to automatically match that preference in much the same way as adapting mobile vs desktop differences.
What tools do we use?
We’re big fans of Tailwind - we already use it in our baseplate to speed up the build process and ensure consistency. Its custom media queries feature allows us to easily add the prefers-colour-scheme query, and Tailwind have hinted that they may soon be introducing built-in dark mode support in a future release.
This is the simplest way to implement the query, but more complex solutions are available that allow you to combine it with other variants if needed. NPM offers a handy plugin for Tailwind with variant support.
Where can you see it in action?
As mentioned above, we’ve already explored ways to limit our carbon footprint through making efficiencies in the way we work. A big part of this is our longstanding relationship with Taylors, who have a huge commitment to sustainability that we echo in our work with them.
As part of our ‘living the ethos’ approach, we highlighted the energy usage benefits to Taylors, who were immediately keen to implement this on their Taylors Impact site.
We applied dark mode to an existing design by first deciding on a few new shades for our Tailwind config’s palette, before using these to override the main text and background colours. Finally, any remaining design conflicts were solved using classes prefixed with our new dark “breakpoint”.
Check out the results by heading over to the Taylors Impact site - don’t forget to set your dark mode first!
Interested in doing more with your website? Find out more about our development services, or get in touch.