Switching off the lights - Adding dark mode to your React app

Theme definitions

The first thing we will need for our dark mode is a definition of what it stands for color-wise. Emotion themes are very well adapted to do this. Indeed we can define all our dark mode colors and light mode colors in distinct files for example and have these colors use the same keys to be accessed. Below we can see an example of a theme I’m using in one of my projects and its dark equivalent.

1
const white '#FFFFFF';
2
const black = "#161617";
3
const gray = "#F8F8F9";
4

5
const themeLight = {
6
  background: gray,
7
  body: black
8
};
9

10
const themeDark = {
11
  background: black,
12
  body: white
13
};
14

15
const theme = mode => (mode === 'dark' ? themeDark : themeLight);
16

17
export default theme;

You’ll notice in the code above that I gave very descriptive names to my variables such as background or body. I always try to make sure none of the variables names are based on the color so I can use the same name across the different themes I’m using.

Now that we have both our dark and light theme, we can focus on how we’re going to consume these themes.

Theme Provider

This is the core component of this post. The Theme Provider will contain all the logic for our dark mode feature: the toggle function, which theme to load when your site renders the first time, and also, inject the theme to all your child components.
With the help of React Hooks and Context, it is possible with just a few lines of code and without the need to build any classes or HoC (Higher order Components).

Loading the state in Context

First, we need to define a default state for our Theme Provider. The two elements that define these states are:

• a boolean that tells us whether or not the dark theme is activated, defaults to false.
• a function toggle that will be defined later.

This state will be the default state in a ThemeContext, because we want to have access to these items across our all application. In order to avoid having to wrap any page of our app in a ThemeContext.Consumer, we’ll build a custom useTheme hook based on the useContext hook. Why hooks? I think this tweet summarizes it pretty well:

As it is stated in the tweet above, I really believe that hooks are more readable than render props:

1
const defaultContextData = {
2
  dark: false,
3
  toggle: () => {},
4
};
5

6
const ThemeContext = React.createContext(defaultContextData);
7
const useTheme = () => React.useContext(ThemeContext);
8

9
// ThemeProvider code goes here
10

11
export { useTheme };

In this ThemeProvider component, we’ll inject both the correct theme and the toggle function to the whole app. Additionally, it will contain the logic to load the proper theme when rendering the app. That logic will be contained within a custom hook: useEffectDarkMode.

1
const useEffectDarkMode = () => {
2
  const [themeState, setThemeState] = React.useState({
3
    dark: false,
4
    hasThemeMounted: false,
5
  });
6

7
  React.useEffect(() => {
8
    const lsDark = localStorage.getItem('dark') === 'true';
9
    setThemeState({ ...themeState, dark: lsDark, hasThemeMounted: true });
10
  }, []);
11

12
  return [themeState, setThemeState];
13
};

In the code above, we take advantage of both the useState and useEffect hook. The useEffectDarkMode Hook will set a local state, which is our theme state when mounting the app. Notice that we pass an empty array [] as the second argument of the useEffect hook. Doing this makes sure that we only call this useEffect when the ThemeProvider component mounts (otherwise it would be called on every render of ThemeProvider).

1
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
2
import React, { Dispatch, ReactNode, SetStateAction } from 'react';
3
import theme from './theme';
4

5
const defaultContextData = {
6
  dark: false,
7
  toggle: () => {},
8
};
9

10
const ThemeContext = React.createContext(defaultContextData);
11
const useTheme = () => React.useContext(ThemeContext);
12

13
const useEffectDarkMode = () => {
14
  const [themeState, setThemeState] = React.useState({
15
    dark: false,
16
    hasThemeLoaded: false,
17
  });
18
  React.useEffect(() => {
19
    const lsDark = localStorage.getItem('dark') === 'true';
20
    setThemeState({ ...themeState, dark: lsDark, hasThemeLoaded: true });
21
  }, []);
22

23
  return [themeState, setThemeState];
24
};
25

26
const ThemeProvider = ({ children }: { children: ReactNode }) => {
27
  const [themeState, setThemeState] = useEffectDarkMode();
28

29
  if (!themeState.hasThemeLoaded) {
30
    /*
31
      If the theme is not yet loaded we don't want to render
32
      this is just a workaround to avoid having the app rendering
33
      in light mode by default and then switch to dark mode while
34
      getting the theme state from localStorage
35
    */
36
    return <div />;
37
  }
38

39
  const theme = themeState.dark ? theme('dark') : theme('light');
40

41
  const toggle = () => {
42
    // toogle function goes here
43
  };
44

45
  return (
46
    <EmotionThemeProvider theme={theme}>
47
      <ThemeContext.Provider
48
        value={{
49
          dark: themeState.dark,
50
          toggle,
51
        }}
52
      >
53
        {children}
54
      </ThemeContext.Provider>
55
    </EmotionThemeProvider>
56
  );
57
};
58

59
export { ThemeProvider, useTheme };

The code snippet above contains the (almost) full implementation of our ThemeProvider:

• If dark is set to true in localStorage, we update the state to reflect this and the theme that will be passed to our Emotion Theme Provider will be the dark one. As a result, all our styled component using this theme will render in dark mode.
• Else, we’ll keep the default state which means that the app will render in light mode.

The only missing piece in our implementation is the toggle function. Based on our use case, it will have to do the following things:

• reverse the theme and update the themeState
• update the dark key in the localStorage

1
const toggle = () => {
2
  const dark = !themeState.dark;
3
  localStorage.setItem('dark', JSON.stringify(dark));
4
  setThemeState({ ...themeState, dark });
5
};

This function is injected in the ThemeContext and aims to toggle between light and dark mode.

Adding the theme switcher

In the previous part, we’ve implemented all the logic and components needed, now it’s time to use them on our app!
Since we’ve based our implementation on React Context, we can simply import the ThemeProvider and wrap our application within it.

The next step is to provide a button on the UI to enable or disable the dark mode. Luckily, we have access to all the things we need to do so through the useTheme hook, which will give us access to what we’ve passed to our ThemeContext.Provider in part two of this post.

1
import React from 'react';
2
import styled from '@emotion/styled';
3
import { useTheme } from './ThemeContext';
4

5
const Wrapper = styled('div')`
6
  background: ${(props) => props.theme.background};
7
  width: 100vw;
8
  height: 100vh;
9
  h1 {
10
    color: ${(props) => props.theme.body};
11
  }
12
`;
13

14
const App = () => {
15
  const themeState = useState();
16

17
  return (
18
    <Wrapper>
19
      <h1>Dark Mode example</h1>
20
      <div>
21
        <button onClick={() => themeState.toggle()}>
22
          {themeState.dark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
23
        </button>
24
      </div>
25
    </Wrapper>
26
  );
27
};
28

29
export default App;

Considering we’re in the default state (light mode), clicking this button will call the toggle function provided through the ThemeContext which will set the local storage variable dark to true and the themeState dark variable to true. This will switch the theme that is passed in the Emotion Theme Provider from light to dark. As a result, all our styled components using that theme will end up using the dark theme, and thus our entire application is now in dark mode. 
In the example above, the Wrapper component uses the colors of the theme for the fonts and the background, when switching from light to dark these CSS properties will change and hence the background will go from gray to black and the font from black to white.

Conclusion

We successfully added support for dark mode in our React application without having done any fundamental changes! I really hope this post will inspire others to add this feature to their own website or app in order to make them more easy on the eye when used during night time.
Moreover, this kind of feature is a great example of hook implementations and how to use the latest features of React to build amazing things.
I got this feature on my own website/portfolio and this is how it looks:

<figcaption>Gif showcasing switching from light to dark mode</figcaption>

The dark mode implementation on my website (sorry for the low frame rate 😅).

If you want to get a sample project with dark mode to hack on top of it, check out this minimal React app I built with all the code showcased on this article.