rfoeluse-prefers-color-scheme
React hook for determining the preferred color scheme
Features:
- SSR support
- Written in Typescript
Install
npm install --save use-prefers-color-schemeUsage
Tip When rendered in node (SSR) the hook returns
no-preference.
import React from 'react'
import usePrefersColorScheme from 'use-prefers-color-scheme'
const App = () => {
const prefersColorScheme = usePrefersColorScheme()
const isDarkMode = prefersColorScheme === 'dark'
return (
<div>You are using {isDarkMode ? 'Dark Mode 🌚' : 'Light Mode 🌞'}!</div>
)
}Online Demo
License
MIT © rfoel