How to add color themes in ReactJS?

Felix Tellmann — Tue, 06 Oct 2020 16:09:55 +0000

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

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.
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 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 by hitting the theme icon in the header.

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 to jump straight to the add it to a page part.

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

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:

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

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

...
<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

...
 <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

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.

We import useColorTheme and impiment it the same way we would use any other react hook:

    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 for the hook. you can name the classes in any way you like, but semantic names are recommended

We added classes for .light-theme, .dark-theme and .funky with
different color variables.
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?

There's an easy solution to that as well. Let us have a look at how we can implement it:

_app.js

...
<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:

// 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:

It looks for the localStorage with the key colorTheme
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 for more info).

_document.js

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.

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

DEV Community: Felix Tellmann

How to add color themes in ReactJS?

Initial Setup

CSS variables

Adding useColorTheme

In detail

Set Specifc Theme

The Flash

Result