https://github.com/cupcakearmy/use-light-switch
React Hook for easy dark mode integration
https://github.com/cupcakearmy/use-light-switch
dark-mode react-hooks
Last synced: about 1 year ago
JSON representation
React Hook for easy dark mode integration
- Host: GitHub
- URL: https://github.com/cupcakearmy/use-light-switch
- Owner: cupcakearmy
- License: mit
- Created: 2020-01-06T21:16:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-15T17:54:58.000Z (over 5 years ago)
- Last Synced: 2025-03-28T20:12:14.415Z (about 1 year ago)
- Topics: dark-mode, react-hooks
- Language: TypeScript
- Homepage:
- Size: 31.3 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# use-light-switch
**React hook for dark mode.**
## 🌈 Features
- Typescript compatible
- **0** Dependencies
- Tiny **~0.4kB**
- React Hooks
###### Installation
```
npm i use-light-switch
```
## 💻 [Live Example](https://codesandbox.io/s/simple-wbpgp)
## 🤔 Motivation
There was no library that included typings 🤕
## 🛠Compatibility & How it works
We leverage two browser features.
1. [prefers-color-scheme](https://caniuse.com/#feat=prefers-color-scheme) media query.
2. [matchMedia](https://caniuse.com/#feat=matchmedia)
The first one is a css media query that gives us the actual user preference. with `window.matchMedia` we can get it inside of javascript and even listen on changes, which makes it reactive.
Currently (26.05.2020) Safari, iOS, Firefox, Chrome, Edge & Android all support these features. IE of course is a lost cause.
## 🚀 Quickstart
```typescript
import React from 'react'
import ReactDOM from 'react-dom'
import { useModeSelector } from 'use-light-switch'
const App: React.FC = () => {
const selected = useModeSelector({
light: { color: 'green', name: 'Light' },
dark: { color: 'red', name: 'Dark' },
unset: { color: 'blue', name: 'Unset' },
})
return
Try switching your dark mode in macOS or Windows
{selected.name}
}
ReactDOM.render(, window.document.getElementById('root'))
```
## 📒 Reference
### `useLightSwitch()`
This is the most basic react hook. It returns one of 3 [Modes](#mode)
###### Example
```typescript
import { Mode, useLightSwitch } from 'use-light-switch'
const Simple: React.FC = () => {
const mode = useLightSwitch()
if (mode === Mode.Dark) ...
return ...
}
```
### Mode
A simple enum. Possible values are:
- `Mode.Light`
- `Mode.Dark`
- `Mode.Unset`
`Unset` is returned when the user has no explicit preference. This is often the case with older or if it's simply unsupported.
### `useModeSelector(options)`
This is a handy hook that reduces boilerplate. You pass values for the different modes and the hook will choose accordingly to what is currently selected. uses [`modeSelector`](#modeselectormode-options) under the hood.
###### Example
```typescript
import { useModeSelector } from 'use-light-switch'
const WithSelector: React.FC = () => {
const selected = useModeSelector({
light: { color: 'green', name: 'Light' },
dark: { color: 'red', name: 'Dark' },
unset: { color: 'blue', name: 'Unset' },
})
return
Selector
{selected.name}
}
```
All parameters are optional and typesafe.
### `modeSelector(mode, options)`
This is a simple functions that returns the matched option to the mode.
###### Example
```typescript
import { Mode, modeSelector } from 'use-light-switch'
const selected = modeSelector(
Mode.Dark,
{
light: { color: 'green', name: 'Light' },
dark: { color: 'red', name: 'Dark' },
unset: { color: 'blue', name: 'Unset' },
}
)
selected.color // red
selected.name // Dark
```