Skip to content

Dark Mode, also known as Night Mode, is becoming an increasingly popular anytime setting choice for internet users.

Research by Android Authority in 2020 found that almost 82% of people will choose to use Dark Mode on their devices whenever it’s available. It’s becoming increasingly common for websites to be designed in both light and dark colour palettes, giving visitors the power to choose their own viewing preference.

But why is Dark Mode so popular?

In this article, we’ll look at the benefits of using Dark Mode on your website, and explain how you can enable it in your design to foster better user experiences.

What is Dark Mode?

Dark Mode is a setting on your smartphone or computer that, when activated, requests that your web browser displays websites with a dark colour palette (for example a black background with white text).

If a website has specified styles for Dark Mode, these will automatically be used for visitors who have Dark Mode switched on.

If no Dark Mode styles have been created, the site will display in its standard design, which is usually dark text on a light background.

Alternatively, if a user has Dark Mode enabled on their device but a website has no specific dark design, certain web browsers, such as Brave, will attempt to invert the colours themselves, with mixed results.

What are the benefits of using Dark Mode on your website?

As the legions of users who are switching to Dark Mode will tell you, there are plenty of reasons for doing so – and they’re not all about aesthetics.

Dark Mode has a number of benefits, both in terms of visitor experiences and your website’s environmental impact.

  • Easier on the eyes – Dark Mode can help reduce eye strain, particularly when using your device in low-light conditions or for a prolonged period of time.
  • Preserves battery – Dark Mode can save up to 63% on your device’s battery life.
  • Supports better sleep – Light Mode can interrupt the circadian rhythm, fooling the body into thinking it’s daytime even long after the sun’s gone down. Switching into Dark Mode later in the evening can help the body get ready for rest.
  • Increases design options – Let’s face it, Dark Mode looks cool, and for designers it opens the door to much more interesting design features and flourishes with its increased contrast.

How to set Dark Mode styles in CSS

With so many people preferring to use Dark Mode on their devices these days, giving them the best experience of your website will mean giving them a Dark version to choose.

Setting up Dark Mode styles in your stylesheet is pretty straightforward, and can be done by adding a media query targeting the prefers-color-scheme: dark browser setting.

For example, you could set your website’s background colour to black with white text with the following CSS:

@media (prefers-color-scheme: dark) {
	body{
		background-color:black;
		color:white;
	}
}

In order for it to override your standard settings, this should be added after your default colour styles.

How to enable Dark Mode on your device

When you’re making design changes and decisions, it’s always a good idea to try and experience things from the user’s perspective. So if you’re applying a new Dark Mode version of your website, it will be worth switching your device into Dark Mode to see how it looks.

This can usually be done from your smartphone or computer’s Appearance settings.

  • iPhone – Go to Settings > Display & Brightness, and under Appearance, select Dark.
  • Android – Go to Settings > Display > Advanced and switch on Dark theme.
  • Mac – Go to System Preferences > General > Appearance and then choose between Light, Dark or Auto.
  • Windows – Go to Start > Settings > Personalisation > Colours, and under Choose your default Windows mode, select Dark.

Dark Mode and accessibility

Given the proportion of people using Dark Mode and the amount of energy it can save, there is potentially a strong argument for designing websites dark by default – especially if we want to design low-carbon ones.

However, when designing websites we need to consider any accessibility implications. And this stands true for a Dark Mode-only design, too.

For starters, there’s plenty of research that suggests light text on a black background can be difficult to read for people who have dyslexia or astigmatism. That could mean as much as 57% of the UK population would struggle to read a purely Dark Mode website.

The British Dyslexia Association goes so far as to recommend using dark text on a light (not white) background.

It is important, therefore, for web developers to always:

  • Give visitors the choice, and let them decide whether Light Mode or Dark Mode is the best for them.
  • Test their Light and Dark themes with accessibility checkers such as WAVE or Color Contrast Checker to ensure sufficiently high contrast.

Conclusion

In this article, we’ve explored the many benefits of using Dark Mode on your website and considered how to ensure your site remains accessible.

We have learned how:

  • Dark Mode uses much less energy than Light Mode, particularly on modern OLED screens.
  • Web developers should test their websites in both Light and Dark modes to ensure the best user experiences, particularly in terms of accessibility.
  • For the best experience, visitors should be able to choose their own Light/Dark Mode preference.

Further reading

beautiful websites,
rooted in good ethics

Back to top Get in touch