Dark Mode Is Not Enough! Here is an alternative...
Tags: react, nextjs, gatsby, tutorial
Published: 2020-12-03 23:13:03

This article is also available in Spanish here: https://www.infoxicator.com/es/dark-mode-no-es-suficiente-esta-es-una-alternativa

These days most websites have an option to toggle Dark mode, and if you find one without it, you will be screaming: "How dare you burning my retinas!". But what if I wanted more than a light and a dark colour scheme and you had the option to use "Gray Mode", or "Christmas Mode" or "My Favorite movie/video game mode"?

![nexjs-demo](https://user-images.githubusercontent.com/17012976/100543720-ad835980-3249-11eb-826f-296b559f1837.gif)


## TL;DR

Theme Switcher Gatsby Plugin 👉 https://www.npmjs.com/package/gatsby-plugin-theme-switcher

Theme Switcher Dependency for Nextjs 👉 https://www.npmjs.com/package/use-theme-switcher

# Creating a Multi Theme Switcher with React


Here are the features I am looking for:

- Switch between an infinite number of themes
- The current theme should be available to all react components in the application.
- Default Dark and Light modes depending on the user's Operating System or browser preference.
- The chosen theme should be persisted on the user's browser
- No "Flash of Death" on hard refresh for static rendered sites

For this tutorial, I will be using Next.js but if you are using Gatsby, check out the nice and ready to use [plugin](https://www.npmjs.com/package/gatsby-plugin-theme-switcher) 😉

Let's start with the standard `Next.js` blog template that comes with `Tailwind` included, however, this solution should work with any styling library of your choice including `styled-components` and `CSS Modules`.

```bash
npx create-next-app --example blog-starter blog-starter-app 
```

## Adding Theme Colours

We are going to use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to add colours to our site and a global CSS class to set our theme.

Open your `index.css` file and add a new class for every theme that you want to add, for example:

```css
.theme-twitter {
    --color-bg-primary: #15202B;
    --color-bg-primary-light: #172D3F;
    --color-bg-accent: #1B91DA; 
    --color-bg-accent-light: #1B91DA; 
    --color-bg-secondary: #657786;
    --color-text-link: #1B91DA;    
    --color-bg-compliment: #112b48;
    --color-bg-default: #192734;
    --color-bg-inverse: #1B91DA;
    --color-text-primary: #fff;
    --color-text-secondary: #f2f2f2;
    --color-text-default: #e9e9e9;
    --color-text-default-soft: #6a6a6a;
    --color-text-inverse: #1B91DA;
    --color-text-inverse-soft: #1B91DA;
  }

.theme-midnightgreen {
  --color-bg-primary: #004953;
  --color-bg-primary-light: #E7FDFF;
  --color-bg-accent: #DE7421; 
  --color-bg-accent-light: #DE7421; 
  --color-bg-secondary: #E7FDFF;
  --color-text-link: #008ca0;
  --color-bg-compliment: #f5f5ff;
  --color-bg-default: #f5f5f5;
  --color-bg-inverse: #d77d4d;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #004953;
  --color-text-default: #303030;
  --color-text-default-soft: #484848;
  --color-text-inverse: #008ca0;
  --color-text-inverse-soft: #ffffffb3;
}

.theme-my-favourite-colors {
 ...
}
```

Open your `tailwind.config.js` file and extend the colour classes with the CSS variables that you created in the previous step. Example:

```javascript
module.exports = {
  purge: ['./components/**/*.js', './pages/**/*.js'],
  theme: {
    extend: {
      colors: {
        'accent-1': 'var(--color-bg-primary)',
        'accent-2': 'var(--color-bg-secondary)',
        'accent-7': 'var(--color-bg-accent)',
        success: '#0070f3',
        cyan: '#79FFE1',
      },
      textColor: {
        white: "var(--color-text-primary)",
        grey: "var(--color-text-link)",
        black: "var(--color-text-secondary)",
      },
    },
  },
}
```

> Note: If you are not using Tailwind, you can configure your styling solution using the same CSS variables, the rest of the steps in this tutorial should remain the same.

Assign the CSS class to the document body tag to apply your custom styles. Open your _document.js file and add hardcode your default theme for now.


```javascript
<body className="theme-twitter">
  <Main />
  <NextScript />
</body>
```
Refresh the page and you should see the theme colours for the class that you have selected.

## Theme State

To manage state, make the theme available globally to all our components and switch between different themes; we are going to use the [React Context API](https://reactjs.org/docs/context.html) to create a theme context and provider.

Create a new file under `context/theme-context.js`

```javascript
import React from "react";
import useLocalStorage from "./context/use-local-storage";

const ThemeContext = React.createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useLocalStorage("theme", null);
  const switchTheme = (newTheme) => {
    // eslint-disable-next-line no-undef
    const root = document.body;
    root.classList.remove(theme);
    root.classList.add(newTheme);
    setTheme(newTheme);
  };
  return (
    <ThemeContext.Provider value={{ theme, switchTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeContext;
```

I am using the `useLocalStorage` hook to persist the theme value under the "theme" key. The source code for this hook can be found here: [https://github.com/infoxicator/use-theme-switcher/blob/master/src/use-local-storage.js](https://github.com/infoxicator/use-theme-switcher/blob/master/src/use-local-storage.js)

The initial value will be null if local storage is empty, more on this later.

The `switchTheme` hook will replace the value of the CSS class we added to the body with the new value passed to this function as well as persisting the value in Local Storage.

Add the new provider to `_app.js`

```javascript
import '../styles/index.css'
import { ThemeProvider } from '../context/theme-context';

export default function  MyApp({ Component, pageProps }) {
  return <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
}
```

## Theme Picker

Let's create a very basic theme picker component that will toggle between the available themes.

```javascript
import React from "react";

const myThemes = [
    {
        id: "theme-midnightgreen",
        name: "Midnight Green",
    },
    {
        id: "theme-spacegray",
        name: "Space Gray",
    },
    {
        id: "theme-twitter",
        name: "Twitter Dark",
    }
]

const ThemePicker = ({ theme, setTheme }) => {
    if (theme) {
        return (
            <div>
            {myThemes.map((item, index) => {
                const nextTheme = myThemes.length -1 === index ? myThemes[0].id : myThemes[index+1].id;
                
                return item.id === theme ? (
                    <div key={item.id} className={item.id}>
                    <button
                        aria-label={`Theme ${item.name}`}
                        onClick={() => setTheme(nextTheme)}
                    >
                        {item.name}
                    </button>
                    </div>
                ) : null;
                    }
                )}
            </div>
        );
    }
    return null;
};

export default ThemePicker;
```

This component, will take an array of available themes and render a button that will set the next available theme on click. This is a very basic implementation of the theme switcher component, but you can add your custom logic and design, like selecting from a drop-down or rendering a list instead.

Render the `ThemeSwitcher` component at the top of the site. Open `layout.js` and add the following:

```javascript
import ThemePicker from './theme-picker';
import React, { useContext } from "react"
import ThemeContext from '../context/theme-context';

export default function Layout({ preview, children }) {
  const { theme, switchTheme } = useContext(ThemeContext);
  return (
    <>
      <Meta />
      <div className="min-h-screen bg-accent-1 text-white">
        <Alert preview={preview} />
        <ThemePicker theme={theme ? theme : 'theme-midnightgreen'} setTheme={switchTheme} />
        <main>{children}</main>
      </div>
      <Footer />
    </>
  )
}
```

The theme value is `null` for the first time and when the user hasn't selected a custom theme yet, for that reason we are passing the default theme value to the `ThemePicker` component.

## Overcoming the "White Flash Of Death"

Who would have thought that a simple bug like this would be so complex and so deeply connected to the different ways of rendering websites (Server Side Rendering, Static Site Generation, Client Side Rendering)? In a nutshell, the flash is caused by the timing when the initial HTML is rendered. When we use SSR or SSG with tools like `next.js` or `gatsby`, the HTML is rendered ahead of time before it reaches the client, so the initial theme value that comes from local storage will be different from the value that was rendered on the server producing a small "flash" while the correct theme is applied.

The key to fixing this problem is to use a "render blocking" script that will set the correct CSS class before the site content is rendered to the DOM.

Create a new file called `theme-script.js`

```javascript
import React from "react";

function setColorsByTheme(
  defaultDarkTheme,
  defaultLightTheme,
  themeStorageKey
) {
  var mql = window.matchMedia("(prefers-color-scheme: dark)");
  var prefersDarkFromMQ = mql.matches;
  var persistedPreference = localStorage.getItem(themeStorageKey);
  var root = document.body;
  var colorMode = "";

  var hasUsedToggle = typeof persistedPreference === "string";

  if (hasUsedToggle) {
    colorMode = JSON.parse(persistedPreference);
  } else {
    colorMode = prefersDarkFromMQ ? defaultDarkTheme : defaultLightTheme;
    localStorage.setItem(themeStorageKey, JSON.stringify(colorMode));
  }

  root.classList.add(colorMode);
}

const ThemeScriptTag = () => {
  const themeScript = `(${setColorsByTheme})(
        'theme-twitter',
        'theme-midnightgreen',
        'theme',
      )`;
// eslint-disable-next-line react/no-danger
  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
};

export default ThemeScriptTag;
```

If you want to dive deep into this issue and this solution, Josh W. Comau created a brilliant [blog post](https://www.joshwcomeau.com/react/dark-mode/) analysing this issue step by step and coming up with this solution.

## Conclusion

And that's all! now I challenge you to go ahead and chose your favourite movie or video game theme and apply it to your website and if you are feeling creative, you can create your own custom theme switcher components like the one [@SamLarsenDisney](https://twitter.com/SamLarsenDisney) added to his site [sld.codes](https://sld.codes) with unlockable themes that can only be activated by exploring the site so go look out for those easter eggs! 😉

{% youtube dnvVr9bOR8I %}