0.3.0 • Published 4 years ago
react-switch-theme v0.3.0
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:
// You did the hardwork now just use your vars. background: var(--background); color: var(--color);