useDarkTheme
Implement dark theme with React hooks, window.matchMedia and localStorage.
Table of Contents
Getting started
npm install --save use-dark-theme
Usage
const [theme, setTheme] = useDarkTheme()
theme === 'dark' ? setTheme('light') : setTheme('dark')
You can force to be dark mode on load const [theme, setTheme] = useDarkTheme(true)
The default css classes are light and dark. This classes are added to the body.
The default storageKey for localStorage is useDarkTheme
To overwrite the defaults pass an object:
const [theme, setTheme] = useDarkTheme(true, {
darkClass: 'dark-mode',
lightClass: 'light-mode',
storageKey: 'myStorageKey'
})
or
const [theme, setTheme] = useDarkTheme(null, {
darkClass: 'dark-mode',
lightClass: 'light-mode',
storageKey: 'myStorageKey'
})
Full example can be found here
Example for flashing on load can be found here
Demo
git clone git@github.com:jagonzalr/useDarkTheme.git
cd useDarkTheme
npm intall
npm start
Notes
This hook was bootstrap using hooks-cli
License
useDarkTheme is MIT licensed.