react-switch-theme

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.

• 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";
  

• 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>

• 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

• Import ( default import ):

  import useReactSwitchTheme from 'react-switch-theme'; 
  

• 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'
    
  }
  

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

• Your css:

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