1.0.3 • Published 4 years ago
@fe.whnhouse/use-system-mode v1.0.3
use-system-mode
This React Hook allows you to determine your system´s current Appearance Theme. It uses the CSS Feature MatchMedia to determine if dark mode is enabled or not.
Browser Support
Features
The library exposes two different hooks:
useSystemMode()
allows you to get a reactive variable which contains either the value light
or dark
, depending on the selected theme.
useIsDarkMode()
gives you a boolean variable which determines whether dark mode is enabled or not.
Usage
const App = () => {
const systemMode = useSystemMode()
return (
<div>
<h1>System Mode: {systemMode}</h1>
</div>
)
}
const App = () => {
const darkMode = useIsDarkMode()
return (
<div>
{darkMode ? <h1>Dark Mode</h1> : <h1>Light Mode</h1>}
</div>
)
}