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.

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: