usemode

useMode hook

🌙 🌞 Simplest way to handle theming in React.js apps

useMode is for applying dark and light mode easily, safely and quickly

It saves theme to localstorage of the browser

Supports TailwindCSS, but requires some settings

• You can use it like below

const mode = useMode()

<button onClick={mode.toggle}>Switch</button>

Mode will be changed if the user clicks the button

This library needs TailwindCSS to be configured especially to work

Add this line to tailwind.config.js

module.exports = {
   ...
   darkMode: 'class',
   ...
}

Usage

• Import the library

import useMode from "usemode"

• mode object has those toggle, setSystem, setDark, setLight, name, isDark properties

const mode = useMode()

Installation

NPM

npm i usemode

Yarn

yarn add usemode

Docs

toggle()

mode.toggle(): function

Switches mode as dark and light

setSystem()

mode.setSystem(): function

Applies system preferred mode

setDark()

mode.setDark(): function

Applies dark mode if it hasn't been done yet

setLight()

mode.setLight(): function

Applies light mode if it hasn't been done yet

name

mode.name: "light" || "dark"

Name of the current mode

isDark

mode.isDark: true || false

True, if dark mode is used currently. Otherwise, false.