How to add dark mode to your website

Dark mode is becoming an appealing alternative to default light-colored interfaces. For example, users in the HubSpot community have begun requesting that platform developers add dark mode capabilities.

However, because most apps are initially developed in light mode first, fully supporting a dark mode design requires significant time and resources. 

This guide teaches you all about dark mode, its benefits, and how to implement it in your website using a React dark mode library based on the Context API and React hooks.

What is dark mode?

Dark mode, also known as night mode, is a display setting that alters the color scheme of a user interface (UI) to show a darker variant. Instead of the default dark text appearing against a light background, otherwise known as light mode, you see light-colored text ‌displayed against a dark or black background.

Dark mode’s design is built to minimize light emissions from device screens while also preserving the minimal color contrast ratios necessary for legibility. 

Why should you enable dark mode?

Although most mobile devices and apps use light mode as their default system, developing apps that natively support dark mode can be extremely helpful for users. For example, offering dark mode can:

Improve accessibility 

Offering a dark theme makes the product more inclusive and, as a result, better able to reach a wide audience.

For instance, dark mode can help improve the viewing experience for people who have visual impairments or are sensitive to bright light. Implementing this feature can make these users’ daily browsing experience more comfortable, especially in low-light environments.

Conserve battery 

Darker hues require less power to display than lighter ones. So, using dark mode can help conserve a device’s battery life. 

Here’s how this works: 

Modern smartphones use OLED and AMOLED displays, which turn off individual pixels when displaying dark themes. These screens emit light in each pixel, meaning pixels in dark areas are turned off and don’t consume power. This makes battery usage more efficient. 

In fact, switching to dark mode saves 3–9% of a phone’s battery power during normal indoor usage (with auto-brightness turned on).

Cater to personal preferences 

Many people, particularly those who work remotely or at night for extended periods, find that apps with a dark mode design give them a more comfortable browsing experience.

For instance, a Jira user expressed dissatisfaction over the Jira’s lack of a dark mode option, claiming that the white pages were difficult to read resulting in them disliking the app despite the app’s many positive aspects.

Some users simply opt for dark mode as their preferred theme to boost their productivity when working or just sifting through content. So, not offering this option could cause users to seek alternatives.

Promote eye comfort and better readability 

Many users prefer dark mode because it reduces eye strain, particularly in dimly lit areas. Using dark mode reduces the amount of light that the device emits while also preserving the lowest possible color contrast ratio. 

In simpler terms, the contrast between the text and the background is lower when a device is in dark mode. This reduces eye strain, particularly in dimly lit areas.

Help your product stand out 

Adding dark mode capability to your website can help your product stand out from the competition and give you a unique selling proposition, especially if your competitors don't offer this feature.

Implementing dark mode on your website

Following the trend of dark mode, I thought this would be a good challenge to create my first library and help developers add dark mode themes to their websites.

At Remote, especially in our blog, we thought it would be nice to add dark mode and so we implemented an initial version. The problem was that our initial implementation didn’t fit all our future use cases and because we’ve updated the project in Gatsby to use the new version of react, our implementation became stale.

Instead of taking time to implement something specifically for Gatsby and worrying about SSR, we decided to find and use a library that would take care of that for us. 

If you want to know where we’re using our time at Remote, check https://remote.com/blog/solving-global-employment-through-remote.

But to use this technique in all React-based websites and using the Context API that allows us to access the state easily in all components was not possible. That’s where I’ve found a good niche to contribute.

So I built a library based on the Context API and React hooks which allows you to easily implement dark mode. To access state inside React components, you should have at least React 16.3.0.

Changing the logo src based on the theme

To help you out with styling your app, we detect if the user has requested the system to use a light or dark color theme (by using the prefers-color-scheme CSS media feature) and set this theme as a class of the body tag like <body class="dark">.

By having this, you can create different styles when the body tag as the CSS class dark or light.

Since we’re using the Context API you should add our provider on top of your top level component so that all the child components have access to this state.

You can use the context in any child component of the <Provider> and this context exposes the mode variable, which is the theme that can be light or dark and the toggleMode function which toggles the theme. When the mode changes, this component will re-render.

1import Provider, { useDarkmodeContext } from 'react-use-dark-mode';
2
3// Images
4import BlackLogo from './blackLogo.svg';
5import WhiteLogo from './WhiteLogo.svg';
6
7const Header = () => {
8  const { mode, toggleMode } = useDarkmodeContext();
9
10  function getLogo(theme) {
11    return theme === "light" ? BlackLogo : WhiteLogo;
12  }
13
14  return (
15    <header>
16      <img src={getLogo(mode)} alt="Logo" />
17      <button type="button" onClick={toggleMode}>Toggle darkmode</button>
18    </header>
19  );
20};
21
22ReactDOM.render(
23  <Provider>
24    <Header />
25  </Provider>,
26  document.getElementById('header')
27);

Using CSS variables

1:root {
2  --textPrimaryColor: #000;
3  --backgroundPrimaryColor: #fff;
4}
5
6body {
7  color: var(--textPrimaryColor);
8  background-color: var(--backgroundPrimaryColor);
9}
10
11body.dark {
12  --textPrimaryColor: #fff;
13  --backgroundPrimaryColor: #000;
14}
15
16.block__element {
17  color: var(--textPrimaryColor);
18}

As you can see, you only need to add the CSS based on the theme and add a button to toggle the theme.

Conclusion

The benefit of this library is if you need to change something that you can’t with CSS and you’re using React, like in the example above where we had to change the src of an image based on the theme, you can now easily subscribe to the theme change and apply your custom behavior.

Overall, this has been an excellent experience to start in the world of open source, the feeling that someone is using your work and you’re helping someone building products with it is awesome.

If you want to skip the hassle of maintaining features like dark mode and instead hire top programmers, Remote is great for managing distributed teams. Remote can help you hire globally so you don't miss out on talent in countries where you don't have an entity. You can reach out to one of our experts to learn more.