gatsby-plugin-theme-switcher
v1.0.0
Published
React theme switcher with hooks and preventing the initial flash
Downloads
466
Maintainers
Readme
gatsby-plugin-theme-switcher
Because Dark Mode is not enough!
A Gatsby plugin to switch between multiple themes, including dark mode and more! And the best part? No "white flash of death"!
Install
yarn add gatsby-plugin-theme-switcher
Usage
Add the plugin to your gatsby-config.js
.
module.exports = {
plugins: [
'gatsby-plugin-theme-switcher',
''
],
};
Add your themes
This plugin adds a custom class name to the body
element of your site and uses CSS variables to customise your color scheme. Add your themes with the .theme-*
format:
.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;
}
Switching Themes
To switch themes, use the ThemeSwitcher
Context
import React, { useContext } from "react"
import { ThemeContext } from 'gatsby-plugin-theme-switcher';
const { theme, switchTheme } = useContext(ThemeContext);
Add A Theme Switcher Component
You can implement your own theme switcher component but here is a basic example:
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 }) => {
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>
);
};
export default ThemePicker;
Advanced Usage
### Add your default theme options in gatsby-config.js
.
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-theme-switcher',
options: {
defaultDarkTheme: 'theme-dark',
defaultLightTheme: 'theme-light',
themeStorageKey: 'my-key',
minify: true,
}
}
],
};
Parameters
| Option | Description
| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| defaultDarkTheme
| Initial theme name when prefers-color-scheme: dark
| defaultLightTheme
| Initial theme name when preference cannot be determined |
| themeStorageKey
| Key to persist the theme name in localStorage
. Default = "theme"
. |
| minify
| Minify the injected script using Terser. Default = true
. |
Credit
This plugin is based on the work and inspired by Sam Larsen-Disney and Josh Comeau
LICENSE
MIT LICENSE