react-switch-theme

Switch between your themes, (i.e. dark/light or so) with just one click. Uses react hooks. react-switch-theme on npm

Live demo: codesandbox

Install:

  npm i react-switch-theme

Updated usage:

This does not break anything, old usage is still valid.

1. Import ThemeProvider and Theme. Theme is the Context which will be used with useContext to get theme and setTheme.

   import { ThemeProvider, Theme } from "react-switch-theme";

2. Wrap your app with ThemeProvider. This takes just one children, It accepts three props.

  const colors = {
    light: {
      background: "#fff",
      color: "#000"
    },
    dark: {
      background: "#000",
      color: "#fff"
    }
  };
  const activeMode = "light";
  const offlineStorageKey = "react-random-key";

  // wrap your app
    <ThemeProvider
      colors={colors}
      activeMode={activeMode}
      offlineStorageKey={offlineStorageKey}
    >
      <App />
    </ThemeProvider>

3. Now in app you can access theme by using:

  const [theme, toogleTheme] = useContext(Theme);

theme is current theme: string, toogleTheme is a function which changes your current theme.

4. Access your css var from css-in-js or css:

  // You did the hardwork now just use your vars.
  background: var(--background);
  color: var(--color);

Old Usage:

Demo: CodeSandbox

1. Import ( default import ):

   import useReactSwitchTheme from 'react-switch-theme'; 

2. Pass one option to the hook

   const options = {
     colors: {
     
       // Object of two color objects. light and dark or whatever you call them.
       light: {
   
       // These properties will be converted to css vars
       // These can be named anything
       // You can access them in css, css-in-js or in other way by using 'var(--propName)'
       background: '#fff',
       color: '#000',
       },
       dark: {
   
       // Property name must be same for both objects
   
       background: '#000',
       color: '#fff',
       },
     },
     
     // This is the current active theme
     // It must be one of the key of colors object
     activeMode: 'light',
     
     // An unique key for your app to store themeMode in localStorage
     // It should be same for every load.
     // So, choosen theme stays even after a refresh
     offlineStorageKey: 'replace it with you app name or some hash'
     
   }

3. Use it in your app:

     const [currentMode, setDiffMode] = useReactSwitchTheme(options)
     
     // currentMode is a string with the currentTheme as value
     // light or dark here.
     
     // setDiffMode is function which will toggle between two themes on call.

4. Your css:

     // You did the hardwork now just use your vars.
     background: var(--background);
     color: var(--color);