reactusesusePreferredColorScheme
prefers-color-scheme media query.
Usage
import { usePreferredColorScheme } from "@reactuses/core";
const Demo = () => {
const color = usePreferredColorScheme();
return <div>PreferredColorScheme: {color}</div>;
};
The defaultState? parameter must be set when using server side rendering, we need it to keep consistency in client side and server side.
Example
PreferredColorScheme: no-preference
Type Declarations
export type ColorScheme = "dark" | "light" | "no-preference"
export default function usePreferredColorScheme(
defaultState?: ColorScheme
): ColorScheme