prefers-mode

prefers-mode

A React library for detecting css media query system preferences: prefers-color-scheme, prefers-reduced-motion, & prefers-contrast.

Usage

# Next.js example
import usePrefersMode, { SCHEME_PREFS, MOTION_PREFS, CONTRAST_PREFS } from 'prefers-mode'

const IndexPage = (props) => {
	const prefs = usePrefersMode()

	const cls = [
		prefs.colorScheme === SCHEME_PREFS.DARK ? 'dark-mode' : 'light-mode',
		prefs.reducedMotion === MOTION_PREFS.REDUCE ? 'reduced-motion' : 'motion',
		prefs.contrast === CONTRAST_PREFS.MORE ? 'high-contrast' : 'normal-contrast'
	].join(' ')

	return <div className={cls}>Hello</div>
}

export default IndexPage

See example for a more detailed working Next.js example.