Dark Mode, here to stay..?

Light/Dark © Amy Richardson '23

Now that I have started studying Software Development and Web Design, I find myself asking friends and family about their experiences with the web. What is their go-to website to kill some time? Why..? Do they actually notice the website's design? Have they come across any recently that have made them nope out of there after a quick scroll? More often than not, lack of a Dark Mode is mentioned as being a deal breaker in whether someone will continue using the application or website. As most of our scrolling occurs in low-light environments , like bed (an interesting statistic discovered in the 2016 study carried out by American research company Dscout), whether it be 7 am or 11.30pm, it is important to be conscious of the level of blue light one exposes themselves too. Although turning on dark mode doesn't protect you 100% from blue light, "True dark modes reduces the levels of blue light emitting from our screens, but this can also be achieved to some extent by switching into night modes, that replace the harsher blue light with more melatonin-friendly orange hues.", as reported on Wired.

In terms of UX, there are several ways in which the inclusion of a dark mode can improve your end product.

- Usability: reflecting on the above statistic of how we use our phones in bed the most, being greeted by a bright white screen in the dead of night is going to have an impact on whether we will visit again. Streaming apps and social media are perfect examples of this. Whether catching up on your favourite shows or mindlessly scrolling your feeds, dark mode keeps you around longer. Netflix is a perfect example of this.

- Accessibility: specific disabilities warrant sensitive web design considerations in order for the person with the disability to have equal access to an application or website. Those who experience migraines, extreme light-sensitivity, dry eyes as a result of an autoimmune condition or issue with the tear ducts, and even cataracts, benefit greatly from access to a lower contrast view. Some websites and apps have even begun setting dark mode as their default, due to its increasing popularity.

- Battery Life: Youtube channel 'Phone Buff' conducted a test in 2019, comparing battery life in iPhones using Dark Mode vs Light Mode. This was discussed in a Mashable article, where the study's conclusion of a 30% extension in battery life in phones with an OLED screen, was detailed. The majority of the dark mode studies that I have come across have taken place pre-2020, with adoption of the UX option only occurring for Facebook and Instagram in October 2020, possibly spurred on by the studies.

So we know that smartphone usage, in particular, is here to stay. We spend on average, 3 hours and 15 minutes on our phones a day Are we prepared to include a default Dark Mode to encourage our application users to stick around a bit longer? If you haven't started looking into this topic already, let me shine some light on some handy resources to get you started... 🌟

CSS Tricks - A Complete Guide to Dark Mode on the Web 🎆

During a recent JavaScript project, I tried my hand at making a dark mode UX for a memory card game. The game was designed with a peaceful nature theme, optional bird song soundtrack and a dark mode for those late night/early morning brain exercise sessions. I used CSS Trick's Guide to make the process as easy as possible. With plenty of visual paths and code snippets, you're sure to find adding a dark mode a breeze. I really could just stop at this resource and you would have enough information to meet the brief but there's more...

Material Design

Bumping up the information available on implementing Dark Mode is Material Design's comprehensive run down on everything that you could need to know to start designing a dark mode UI. I love that its content is heavily focused on overlay and contrast. Two simple ways to create depth to a graphic object. To dive deeper, check out Material 3, Google's open-source design system.

Dribbble

Dribbble provides a platform for smooth browsing of web designs by topics. Searching for Dark Mode returns 100s of web designs, illustrations and graphics produced with dark mode front and center in their creators mind.

Darkmode.js

Short on time to develop an additional UI or maybe just want to try dark mode on existing projects? Darkmode.js adds a dark-mode widget to your website in a few seconds.

Dark Reader

Dark Reader is a multi-thousand downloaded extension in the Chrome Web Store that makes dark mode available for any website. It's benefits include adjustable brightness, contrast, sepia filters and grayscale settings. Haven't implemented a dark mode on your site yet? Perhaps try Dark Reader with it to get some suggestions as to how to prepare your assets to look their best in dark mode.

Most of us Developers use dark mode on the daily, through our coding environments, note apps and even this site. I believe it is a feature that is here to stay and I for one, will do my best to implement one in every suitable project going forward.