Have ideas to improve npm?Join in the discussion! ¬Ľ

    use-theme-switcher

    1.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    use-theme-switcher

    Because Dark Mode is not enough!

    A React hook to switch between multiple themes, including dark mode and more! And the best part? No "white flash of death"!

    nexjs-demo

    Demo

    Live Example

    Example Repo

    Gatsby Plugin ūüĎÄ

    Using Gatsby?, checkout this plugin instead:

    https://github.com/infoxicator/gatsby-plugin-theme-switcher

    Install

    yarn add use-theme-switcher

    or

    npm i -S use-theme-switcher

    Usage with NextJS

    Add the ThemeScriptTag to _document.

    This script prevents the white flash of death for static rendered sites. It is very important that the script is added just after the opening body tag and before any other content.

    You can also pass the name of your default light and dark themes as props. These defaults will be used when visitor come to your site for the first time and will try to match their preference using window.matchMedia("(prefers-color-scheme: dark)"); and the default light theme if this cannot be determined.

    import Document, { Html, Head, Main, NextScript } from 'next/document'
    import { ThemeScriptTag } from 'use-theme-switcher';
     
    export default class MyDocument extends Document {
      render() {
        return (
          <Html lang="en">
            <Head>
            </Head>
            <body>
              <ThemeScriptTag defaultDarkTheme="theme-dark" defaultLightTheme="theme-light" />
              <Main />
              <NextScript />
            </body>
          </Html>
        )
      }
    }
     

    Add the ThemeProvider to _app.js

    import '../styles/index.css'
    import { ThemeProvider } from 'use-theme-switcher';
     
    function MyApp({ Component, pageProps }) {
      return <ThemeProvider>
          <Component {...pageProps} />
        </ThemeProvider>
    }
     
    export default MyApp
     

    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 ThemeContext hook.

    import React, { useContext } from "react"
    import { ThemeContext } from 'use-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 }) => {
        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;
     

    ThemeScriptTag Properties

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

    Custom themeStorageKey

    If you want to change the themeStorageKey, ensure the same prop value is passed to both the ThemeScriptTag and the ThemeProvider. Example:

    function MyApp({ Component, pageProps }) {
      return <ThemeProvider themeStorageKey='my-custom-key'>
          <Component {...pageProps} />
        </ThemeProvider>
    }
    export default class MyDocument extends Document {
      render() {
        return (
          <Html lang="en">
            <Head>
            </Head>
            <body>
              <ThemeScriptTag 
                defaultDarkTheme="theme-dark" 
                defaultLightTheme="theme-light" 
                themeStorageKey='my-custom-key'
              />
              <Main />
              <NextScript />
            </body>
          </Html>
        )
      }
    }

    Credit

    This plugin is based on the work and inspired by Sam Larsen-Disney and Josh Comeau

    LICENSE

    MIT LICENSE

    Install

    npm i use-theme-switcher

    DownloadsWeekly Downloads

    27

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar