React Component Package

This package includes React components which can be used to add "light" and "dark" theme to your web application. CSS used in website example project is built with Tailwind seperately.

Website

https://react-dark-light-theme-switcher.netlify.app/

Installation

npm install @jaiminmoslake7020/react-dark-light-theme-switcher

How to use it

Use it with the provider, which will apply either [theme="dark"] or [theme="light"] to the applyTo selector. In the example below, a button will appear, allowing the user to change the theme, which will be applied to the body. preferColorScheme when true retrieves the color scheme from the system. And false then saves it to localStorage.

<ThemeSwitchProvider applyTo={"body"} preferColorScheme={false}>
  ...
  <ThemeSwitcherBtnProviderChild/>
</ThemeSwitchProvider>

or just use button and apply it by yourself.

<ThemeSwitcherBtn theme={theme}
                  setTheme={setTheme}
                  themeSwitcherContainerClassName={themeSwitcherContainerClassName}
                  iconWrapperClassName={iconWrapperClassName}
                  sunIconWrapperClassName={sunIconWrapperClassName}
                  moonIconWrapperClassName={moonIconWrapperClassName}/>

or hook with ThemeSwitcherBtn component,

const applyTo = 'body';
const preferColorScheme = true; // boolean
const {theme, setTheme} = useThemeSwitch(applyTo, preferColorScheme);

Component Properties

ThemeSwitcherBtn

Properties	Type	Values	Default
theme	'light' | 'dark'	'light', 'dark'	'light'
setTheme	Function
themeSwitcherContainerClassName?	string	"any-styling-class"
iconWrapperClassName?	string	"any-styling-class"
sunIconWrapperClassName?	string	"any-styling-class"
moonIconWrapperClassName?	string	"any-styling-class"

ThemeSwitcherBtnProviderChild

Properties	Type	Values	Default
themeSwitcherContainerClassName?	string	"any-styling-class"
iconWrapperClassName?	string	"any-styling-class"
sunIconWrapperClassName?	string	"any-styling-class"
moonIconWrapperClassName?	string	"any-styling-class"

export type ElWithClassType = `.${string}`;
export type ElWithIdType = `#${string}`;
export type ApplyToType = 'html' | 'body' | keyof HTMLElementTagNameMap | ElWithClassType | ElWithIdType;

ThemeSwitchProvider

Properties	Type	Values	Default
applyTo	ApplyToType	'html' | 'body' | "any-class-or-id-selector"	'body'
preferColorScheme?	boolean	true, false	undefined
children	React.ReactNode

When preferColorScheme is undefined, it uses browser's "localStorage" API.

Author

Jaimin Pandya