usePreferredColorScheme
prefers-color-scheme media query
Usage
Live Editor
function Demo() { const color = usePreferredColorScheme(); return <div>PreferredColorScheme: {color}</div>; };
Result
API
usePreferredColorScheme
Returns
ColorScheme: value of prefers-color-scheme media query
Arguments
| Argument | Description | Type | DefaultValue |
|---|---|---|---|
| defaultState | default value | ColorScheme | undefined | no-preference |
ColorScheme
Type
export type ColorScheme = 'dark' | 'light' | 'no-preference'