usemode v1.3.4
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 thosetoggle
,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.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago