Dark Mode Is Not Enough! Here Is an Alternative…

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”?

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

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

npx create-next-app — example blog-starter blog-starter-app

Adding Theme Colours

We are going to use CSS variables 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:

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

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.

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 to create a theme context and provider.

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

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

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`

Theme Picker

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

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:

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`

If you want to dive deep into this issue and this solution, Josh W. Comau created a brilliant blog post 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 added to his site sld.codes with unlockable themes that can only be activated by exploring the site, so go lookout for those easter eggs! 😉

--

--

--

👨‍💻Staff Engineer at Postman 🔈 Conference Speaker. ⚛️ Writing about Micro-Frontends and Frontend Architecture at Scale. ❤️ We rise by lifting others.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What if we stop using null?

Table Relationships in Sequelize

React-Native Pull down to refresh without using Hooks

React.Children.map && React.cloneElement

ionic lab external

JavaScript API to Recognize Humans vs Bots in Chrome

How to Create a React App without using create-react-app

Create React App Without Using create-react-app

Assembling React application with Web Assembly

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ruben Casas

Ruben Casas

👨‍💻Staff Engineer at Postman 🔈 Conference Speaker. ⚛️ Writing about Micro-Frontends and Frontend Architecture at Scale. ❤️ We rise by lifting others.

More from Medium

Web Developers are Shopify Developers

Snapshots with Storybook and Jest

Getting started with Webpack: An Introduction

Fixing scaling issues on Safari with some cool CSS