React hook for dark mode.
npm i use-light-switch
There was no library that included typings
We leverage two browser features.
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.
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 <div>
<p>Try switching your dark mode in macOS or Windows</p>
<div style={{
padding: '1em 2em',
backgroundColor: selected.color
}}>
{selected.name}
</div>
</div>
}
ReactDOM.render(<App />, window.document.getElementById('root'))
useLightSwitch()
This is the most basic react hook. It returns one of 3 Modes
import { Mode, useLightSwitch } from 'use-light-switch'
const Simple: React.FC = () => {
const mode = useLightSwitch()
if (mode === Mode.Dark) ...
return ...
}
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
under the hood.
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 <div>
<h3>Selector</h3>
<div style={{
padding: '1em 2em',
backgroundColor: selected.color
}}>
{selected.name}
</div>
</div>
}
All parameters are optional and typesafe.
modeSelector(mode, options)
This is a simple functions that returns the matched option to the mode.
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