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
codesandbox
Live demo:Install:
npm i react-
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:
//););
Old Usage:
#### Demo: CodeSandbox
-
Import ( default import ):
; -
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 objectsbackground: '#000'color: '#fff'// This is the current active theme// It must be one of the key of colors objectactiveMode: '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 refreshofflineStorageKey: 'replace it with you app name or some hash' -
Use it in your app:
const currentMode setDiffMode =// 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:
//););