Browser

usePreferredColorScheme

Reactive color scheme preference. Returns a ReadonlyObservable tracking the user's preferred color scheme ('dark', 'light', or 'no-preference') via prefers-color-scheme media queries.

Demo

Color Scheme Preference

no-preference

Tracks the user's preferred color scheme.

Current preference: no-preference

import { 
const usePreferredColorScheme: () => UsePreferredColorSchemeReturn
usePreferredColorScheme } from "@usels/web";

function 
function Component(): JSX.Element
Component() {
  const 
const scheme$: UsePreferredColorSchemeReturn
scheme$ = 
function usePreferredColorScheme(): UsePreferredColorSchemeReturn
Framework-agnostic reactive prefers-color-scheme tracker.
Composes two createMediaQuery calls (dark and light) and exposes
a computed Observable mapping them to 'dark' / 'light' /
'no-preference'. Must be called inside a useScope factory.
usePreferredColorScheme();

  return <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Preferred: {
const scheme$: UsePreferredColorSchemeReturn
scheme$.
ImmutableObservableBase<ColorScheme>.get(trackingType?: TrackingType | GetOptions): {}
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>;
}

import { createPreferredColorScheme } from "@usels/web";

function Component() {
  "use scope";
  const scheme$ = createPreferredColorScheme();

  return <p>Preferred: {scheme$.get()}</p>;
}

Type

Returns

UsePreferredColorSchemeReturn

Name	Type	Description
`peek`	`{ (): ColorScheme; (): ColorScheme; }`	-
`get`	`(trackingType?: TrackingType \| GetOptions) => ColorScheme`	-
`onChange`	`(cb: ListenerFn<ColorScheme>, options?: { trackingType?: TrackingType; initial?: boolean \| undefined; immediate?: boolean \| undefined; noArgs?: boolean \| undefined; } \| undefined) => () => void`	-

Source

View on GitHub