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
gatsby-config.js
.
Add the plugin to your moduleexports = 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:
Switching Themes
To switch themes, use the ThemeSwitcher
Context
; const theme switchTheme = ;
Add A Theme Switcher Component
You can implement your own theme switcher component but here is a basic example:
; const myThemes = id: "theme-midnightgreen" name: "Midnight Green" id: "theme-spacegray" name: "Space Gray" id: "theme-twitter" name: "Twitter Dark" const ThemePicker = { return <div> myThemes </div> ;}; ;
Advanced Usage
gatsby-config.js
.
Add your default theme options in moduleexports = 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