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”?
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.
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`
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.
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! 😉