DEMO
Try switching system color preference to observe change
Preferred color scheme is - light

useRouter

Reactive prefers color scheme.

Usage

import { usePreferredColorScheme } from '@react-hooks-library/core'

export function Demo() {
  const colorScheme = usePreferredColorScheme()

  return <div>Color Scheme is - {colorScheme}</div>
}

Type Declarations

declare type ColorSchemeType = 'dark' | 'light'

/**
 * Reactive prefers-color-scheme media query.
 *
 * @see https://react-hooks-library.vercel.app/core/usePreferredColorScheme
 */
declare function usePreferredColorScheme(): "dark" | "light"

Source

Source | Demo | Docs