The pros and cons of dark mode – and when to use it in web design

Dark mode is a growing trend in web design. Here’s how you can bring dark mode UI into your own designs.

As more big brands like Facebook and Google hop on the bandwagon of dark mode design, there’s ample time to start considering if it might be right for the design of your business’s website. Here’s an in-depth look at the pros and cons of dark mode and when and where it might be best to implement it.


What is dark mode?

Dark mode is a user interface (UI) that uses a dark colour for the primary background – usually black or dark grey. This theme is the polar opposite to the traditional black text on white backgrounds that UI designers have been using for decades. As we spend more and more time with our screens, the discovery that dark themes help with eye strain has meant that dark themes have been rolling out more across social media platforms and web design in general.


Dark mode made its first comeback in Windows Phone 7 in 2010. Once Google had verified that dark mode saves battery life, they added the feature to their Android OS in 2018. A year later, Apple followed suit with a dark mode on iOS and iPadOS.


Pros of using dark mode

If done effectively, dark mode is easy on the eyes, can save battery life and can be better for our health.  Here are some of the practical advantages of dark mode:

  • Reduces eye strain: We’ve all been there – a busy day at the desk results in stinging eyes and a headache. Dark mode is gentler on the eyes as less blue light is required, meaning fewer negative effects on sleep and general health. (Harvard Health)
  • Gives a productivity boost: Dark mode UI makes users feel a little less reluctant about working on the computer as the energy-saving benefits help to trigger motivation.
  • Saves battery life: Dark mode uses an increased number of black pixels, which means your device is using less energy powering colourful pixels.


Cons of using dark mode

Dark mode does come with some disadvantages from a visual aesthetic viewpoint:  

  • Can reduce emotional connection : As established with colour theory, colours can create desired emotions that you might like your customers to experience. Dimming these colours might create a barrier between your customer and their connection with your brand.
  • Shrinks space: On a device, dark mode can work the same way as dark walls in a room, making the space feel smaller. This might not be ideal if you’re trying to convey a simple, spacious design.
  • Accessibility: Low contrast colours can be hard to read, so keep that in mind and do your research on the best dark mode colour combinations, especially for those who suffer from colour-blindness.


When to use dark mode

  • Match your brand colours: If your brand’s existing colour palette shines in a dark mode setting, it might be time to make the shift. However, reconsider this if you’re having to change your entire branding to fit in with deeper hues.
  • Define your industry at a glance: Dark mode UI is also useful to enhance specific industries. For example, a dark mode theme would be much more fitting for a nightlife venue’s website than a website marketing children’s toys, which will need to be much brighter and eye-catching.
  • Embrace minimalism and flat design: If your design is minimalist and doesn’t require room for lots of content, dark mode might be perfect for your brand.
  • Generate emotion: When you’re trying to create a certain emotional response with colour theory, you can use low visibility to your brand’s advantage.


The rise of popularity of dark mode is definitely something that is impacting web design and will continue to do so as we spend more time on our screens. If you’re considering getting creative with dark mode for your business’s website, we’d love to hear from you to see how we can help.