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:
.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:
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.
<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 to create a theme context and provider.
Create a new file under context/theme-context.js
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
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
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.
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:
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
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 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 look out for those easter eggs! 😉
Top comments (0)