usePreferredColorScheme

Browser & device

Track the user's preferred color scheme (prefers-color-scheme)

Install

$ npm install @usefy/use-preferred-color-scheme

usePreferredColorScheme.tsx

import { usePreferredColorScheme } from "@usefy/use-preferred-color-scheme";

const scheme = usePreferredColorScheme(); // "light" | "dark"

usePreferredColorScheme(options?): "light" | "dark"

options.defaultScheme — scheme returned on the server / when matchMedia is unavailable (default "light").
options.initializeWithValue — when true (default), the real preference is read synchronously on the first client render. Set to false to render defaultScheme on the first client render and defer the real read to a post-commit effect, avoiding a hydration mismatch when the server rendered defaultScheme.

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.