useDarkTheme

Implement dark theme with React hooks, window.matchMedia and localStorage.

Table of Contents

• Getting Started
• Usage
• Demo
• Notes
• License

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 [email protected]:jagonzalr/useDarkTheme.git
cd useDarkTheme
npm intall
npm start

Notes

This hook was bootstrap using hooks-cli

License

useDarkTheme is MIT licensed.