usePrefersColorScheme

Tracks the user’s preferred color scheme via (prefers-color-scheme: dark) and re-renders when it changes. SSR-safe — returns defaultScheme (default 'light') on the server

Preferred scheme: light ☀️

Change your OS / browser appearance setting to see this flip.


import { usePrefersColorScheme } from 'react-stateful-hooks';
 
const scheme = usePrefersColorScheme(); // 'light' | 'dark'
 
return <div data-theme={scheme} />;

Signature


const scheme = usePrefersColorScheme(defaultScheme?: 'light' | 'dark'); // default: 'light'

Built on top of useMediaQuery