How to add color themes in ReactJS?

Tags: react, nextjs, dark
Published: 2020-10-06 16:09:55

More than just dark-mode, add any number of color themes to your react site.

---

**TL;DR** Add as many color themes as you like to your react app, using a tiny react hook and CSS custom properties. Check it out here: [use-color-theme](https://github.com/FelixTellmann/use-color-theme)

---

Over the last few weeks, I've been upgrading my website with a complete redesign, including dark-mode functionality. I've found some good resources to add a dark-mode / light
 -mode switcher, but very little info to do proper theming with more than just two themes.

That's why I decided to build a new feature for my site: [use-color-theme](https://github.com/FelixTellmann/use-color-theme).
A simple react hook that toggles `light-theme`, `dark-theme` and any other
 class on the `body` tag. The hook works with CSS [custom
  properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and uses
   `prefers-color-scheme` and localStorage under the hood to match users
    preferences and eliminate the *flash* problem that's often associated with
     color theming.

Now adding a new color theme happens in just a few steps. Check it out on my [site](https://felixtellmann.com) by hitting the theme icon in the header.

![Color Change Image](https://dev-to-uploads.s3.amazonaws.com/i/yp81zekoa3hm5rdjcze3.gif)

## Initial Setup

Adding multiple themes has never been easier. Just follow the simple steps and you can add theming to your site.
Let's create an example page to go through the steps or [click here](#adding-use-color-theme) to jump straight to the *add it to a page* part.

First, we create a new directory and install the basics.

```bash
mkdir colorful && cd colorful
yarn init -y
yarn add react react-dom next
```

Next, we create the `pages` folder required for `NextJs` and create two files: `_app.js` and `index.js`.
Let us also add some basics to make it look pretty.

_app.js:
```jsx
export const _App = ({ pageProps, Component }) => {

  return (
    <>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
          Ubuntu, Cantarell, Fira Sans, Helvetica Neue, sans-serif;
        }

        body {
          background-color: #fff;
        }

        a {
          color: inherit;
          text-decoration: none;
        }

        * {
          box-sizing: border-box;
        }

        header {
          height: 100px;
          position: sticky;
          top: 0;
          margin-top: 32px;
          background-color: #fff
        }

        nav {
          max-width: 760px;
          padding: 32px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin: 0 auto;
        }

        button {
          border: 0;
          border-radius: 4px;
          height: 40px;
          min-width: 40px;
          padding: 0 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #e2e8f0;
          cursor: pointer;
          color: #fff;
          margin-left: 16px;
        }

        button:hover, button:focus, button:active {
          background-color: var(--button-bg-hover);
          outline: none;
        }
      `}</style>
      <header>
        <nav>
          <button>Toggle</button>
        </nav>
      </header>
      <Component {...pageProps} />
    </>
  );
};

export default _App;
```

index.js
```jsx
export default function Index() {
  return <>
    <style jsx>{`
      .wrapper {
        max-width: 760px;
        padding: 0 32px;
        margin: 0 auto;
      }
    `}</style>
    <main className="page">
      <div className="wrapper">
        <h1 className="intro">Hello World!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
          animi consectetur delectus dolore eligendi id illo impedit iusto,
          laudantium nam nisi nulla quas, qui quisquam voluptatum? Illo nostrum
          odit optio.
        </p>
      </div>

    </main>
  </>;
}
```

### CSS variables

Let's add some CSS custom properties for the theme styling.

index.js
```jsx
...
<style jsx>{`
 ...

  h1 {
    color: var(--headings);
  }

  p {
    color: var(--text)
  }
`}</style>
...
```

In the _app.js file, we can then add the global CSS variables with its different colors. *You can also add the CSS properties with any other css-in-js
  framework or plain css files, as long as the classes are matched accordingly*

 Let's also swap the colors used for the header so we use CSS properties across the board.

_app.js
```jsx
...
 <style jsx global>{`
  ...
  body {
    background-color: var(--background);
  }

  header {
    height: 100px;
    position: sticky;
    top: 0;
    margin-top: 32px;
    background-color: var(--background);
    backdrop-filter: blur(10px);
  }

  nav {
    max-width: 760px;
    padding: 32px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 auto;
  }

  button {
    border: 0;
    border-radius: 4px;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--button-bg);
    transition: background-color 0.2s ease-in;
    cursor: pointer;
    color: var(--headings)
  }

  button:hover, button:focus, button:active {
    background-color: var(--button-bg-hover);
    outline: none;
  }

  body {
    --button-bg: #e2e8f0;
    --button-bg-hover: #cdd7e5;
    --background: #fff;
    --headings: #000;
    --text: #38393e;
  }
`}</style>
```

## Adding useColorTheme

Add the custom hook by running `yarn add use-color-theme` in the terminal and implement it in our _app.js file. This will make sure that the themes are available globally on each page.

_app.js
```jsx
import useColorTheme from "use-color-theme";

export const _App = ({ pageProps, Component }) => {
  const colorTheme = useColorTheme('light-theme', {
    classNames: ['light-theme', 'dark-theme', 'funky']
  });
  return (
    <>
      <style jsx global>{`
        ...

        .light-theme {
          --button-bg: #e2e8f0;
          --button-bg-hover: #cdd7e5;
          --background: #fff;
          --headings: #000;
          --text: #38393e;
        }

        .dark-theme {
          --button-bg: rgb(255 255 255 / 0.08);
          --button-bg-hover: rgb(255 255 255 / 0.16);
          --background: #171923;
          --headings: #f9fafa;
          --text: #a0aec0;
        }

        .funky {
          --button-bg: #1f2833;
          --button-bg-hover: #425069;
          --background: #0b0c10;
          --headings: #66fcf1;
          --text: #e647ff;
        }
    `}</style>
      <header>
        <nav>
          <button onClick={colorTheme.toggle}>Toggle</button>
        </nav>
      </header>
      ...
    </>
  );
};

export default _App;
```

### In detail

Having a look at the detail to see what's happening.
  1. We import useColorTheme and impiment it the same way we would use any
   other react hook:
   ```js
    const colorTheme = useColorTheme('light-theme', {
      classNames: ['light-theme', 'dark-theme', 'funky']
    });
   ```
   The 1st parameter is the initial class, which will be used if nothing else has been selected yet. A second parameter is an Object with the
      [configuration](https://github.com/FelixTellmann/use-color-theme#parameters) for the hook. *you can name the classes in any way you like, but semantic names are recommended*

  2. We added classes for `.light-theme`, `.dark-theme` and `.funky` with
   different color variables.

  3. We added an onClick function to the button with `colorTheme.toggle`

### Set Specifc Theme

**But what if I want to change it to a specific theme?**<br />
There's an easy solution to that as well. Let us have a look at how we can implement it:


_app.js
```jsx
...
<nav>
  <button onClick={() => colorTheme.set('light-theme')}>Light</button>
  <button onClick={() => colorTheme.set('dark-theme')}>Dark</button>
  <button onClick={() => colorTheme.set('funky')}>Funky</button>
  <button onClick={() => colorTheme.toggle()}>Toggle</button>
</nav>
...
```

Now we are all set and can easily change the themes in any way we like. But what happens when we refresh the page? Check it out.



## The Flash

 As you see, when refreshing the page, the theme stays the same as before, but there is a split second of a white flash. That's because the user-preference is stored in
   localStorage and only accessed during the react hydration. Luckily, there is a solution to that as well.

We can set up a code blocking script that completes loading before anything else can be executed. Let's create a file for the script `mkdir public && cd public` and create the file with `touch colorTheme.js` and copy the below code into the file.


colorTheme.js:
```js
// Insert this script in your index.html right after the <body> tag.
// This will help to prevent a flash if dark mode is the default.

(function() {
  // Change these if you use something different in your hook.
  var storageKey = 'colorTheme';
  var classNames = ['light-theme', 'dark-theme', 'funky'];

  function setClassOnDocumentBody(colorTheme) {
    var theme = 'light-theme';
    if (typeof colorTheme === 'string') {
      theme = colorTheme;
    }
    for (var i = 0; i < classNames.length; i++) {
      document.body.classList.remove(classNames[i]);
    }
    document.body.classList.add(theme);
  }

  var preferDarkQuery = '(prefers-color-scheme: dark)';
  var mql = window.matchMedia(preferDarkQuery);
  var supportsColorSchemeQuery = mql.media === preferDarkQuery;
  var localStorageTheme = null;
  try {
    localStorageTheme = localStorage.getItem(storageKey);
  } catch (err) {}
  var localStorageExists = localStorageTheme !== null;
  if (localStorageExists) {
    localStorageTheme = JSON.parse(localStorageTheme);
  }
  // Determine the source of truth
  if (localStorageExists) {
    // source of truth from localStorage
    setClassOnDocumentBody(localStorageTheme);
  } else if (supportsColorSchemeQuery) {
    // source of truth from system
    setClassOnDocumentBody(mql.matches ? classNames[1] : classNames[0]);
    localStorage.setItem(storageKey, JSON.stringify('dark-theme'));
  } else {
    // source of truth from document.body
    var iscolorTheme = document.body.classList.contains('dark-theme');
    localStorage.setItem(storageKey, iscolorTheme ? JSON.stringify('dark-theme') : JSON.stringify('light-theme'));
  }
}());
```

This script does the following:

1. It looks for the `localStorage` with the key `colorTheme`
2. Then it looks for the `prefers-color-scheme` CSS media query, to check whether its set to dark, which translates to the user loading the website having a system using dark mode.
   * If there's no mode set in localStorage
     but the user's system uses dark mode, we add a class `dark-theme` to the
      body of the main document.
   * If there's nothing set in localStorage we don't do anything, which will
    end up loading the default theme of our Site.
   * Otherwise, we add the class associated with the mode set in local
    storage to the body of the document

The last thing we then need to do is to load the script during page load. We want to make sure that the script runs after our meta tags are loaded, but before the content of the page get loaded. In Next.js we can use the
   `_document.js` file to load the script before the main content & after the
    `<head></head>` (check out the [docs](https://nextjs.org/docs/advanced-features/custom-document) for more info).


_document.js
```jsx
import Document, { Head, Html, Main, NextScript } from 'next/document';

class _Document extends Document {
  render() {
    return (
      <Html>
        <Head>
        </Head>
        <body>
          <script src="./colorTheme.js" />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default _Document;

```

## Result

By adding the script to the `body` before any other content is loaded, we avoid the **flash** successfully. You can find the code [here](https
 ://github.com/FelixTellmann/use-color-theme/tree/master/example).

Let me know what you think of it and try and create your own color-themes.