https://github.com/berzanorg/usemode
🌙 🌞 Simplest way to handle theming in React apps
https://github.com/berzanorg/usemode
modes moding react reactjs tailwind tailwindcss theme theming
Last synced: 2 months ago
JSON representation
🌙 🌞 Simplest way to handle theming in React apps
- Host: GitHub
- URL: https://github.com/berzanorg/usemode
- Owner: berzanorg
- License: mit
- Created: 2022-06-08T11:03:00.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-24T07:45:13.000Z (almost 3 years ago)
- Last Synced: 2025-03-12T23:33:19.532Z (2 months ago)
- Topics: modes, moding, react, reactjs, tailwind, tailwindcss, theme, theming
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/usemode
- Size: 30.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```jsx
const mode = useMode()
```
```jsx
Switch
```
> 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
```javascript
module.exports = {
...
darkMode: 'class',
...
}
```
## Usage
- Import the library
```jsx
import useMode from "usemode"
```
- `mode` object has those `toggle`, `setSystem`, `setDark`, `setLight`, `name`, `isDark` properties
```jsx
const mode = useMode()
```
## Installation
#### NPM
```
npm i usemode
```
#### Yarn
```
yarn add usemode
```
## Docs
#### toggle()
```jsx
mode.toggle(): function
```
> Switches mode as dark and light
#### setSystem()
```jsx
mode.setSystem(): function
```
> Applies system preferred mode
#### setDark()
```jsx
mode.setDark(): function
```
> Applies dark mode if it hasn't been done yet
#### setLight()
```jsx
mode.setLight(): function
```
> Applies light mode if it hasn't been done yet
#### name
```jsx
mode.name: "light" || "dark"
```
> Name of the current mode
#### isDark
```jsx
mode.isDark: true || false
```
> True, if dark mode is used currently. Otherwise, false.