Browser

usePreferredDark

Reactive dark theme preference. Returns Observable<boolean> that tracks whether the user prefers a dark color scheme via the (prefers-color-scheme: dark) media query.

A thin wrapper around useMediaQuery.

Demo

Dark Mode Preference

Light

Tracks the user's prefers-color-scheme: dark media query.

Your system prefers light mode.

import { 
const usePreferredDark: (options?: DeepMaybeObservable<UseMediaQueryOptions>) => UsePreferredDarkReturn
usePreferredDark } from "@usels/web";

function 
function Component(): JSX.Element
Component() {
  const 
const isDark$: any
isDark$ = 
function usePreferredDark(options?: DeepMaybeObservable<UseMediaQueryOptions>): UsePreferredDarkReturn
Framework-agnostic reactive prefers-color-scheme: dark tracker.
Thin wrapper around
createMediaQuery
. Must be called inside a
useScope factory.
usePreferredDark();

  return <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>{
const isDark$: any
isDark$.
any
get() ? "Dark mode" : "Light mode"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>;
}

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

function Component() {
  "use scope";
  const isDark$ = createPreferredDark();

  return <p>{isDark$.get() ? "Dark mode" : "Light mode"}</p>;
}

SSR with ssrWidth

Hook
Scope

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

function Component() {
  const isDark$ = usePreferredDark({ ssrWidth: 1280 });

  return <p>{isDark$.get() ? "Dark mode" : "Light mode"}</p>;
}

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

function Component() {
  "use scope";
  const isDark$ = createPreferredDark({ ssrWidth: 1280 });

  return <p>{isDark$.get() ? "Dark mode" : "Light mode"}</p>;
}

Type

Parameters

Parameter	Type	Description
`options`	`UseMediaQueryOptions` (optional)	-

UseMediaQueryOptions

Option	Type	Default	Description
`ssrWidth`	`number`	`-`	Static viewport width used to evaluate `min-width` / `max-width` queries when `window.matchMedia` is unavailable (SSR).
`window`	`WindowSource`	`-`	-

Returns

ObservableBoolean<boolean>

Name	Type	Description
`toggle`	`() => void`	-
`peek`	`{ (): boolean; (): boolean; }`	-
`get`	`(trackingType?: TrackingType \| GetOptions) => boolean`	-
`onChange`	`(cb: ListenerFn<boolean>, options?: { trackingType?: TrackingType; initial?: boolean \| undefined; immediate?: boolean \| undefined; noArgs?: boolean \| undefined; } \| undefined) => () => void`	-
`set`	`{ (value: (prev: boolean) => boolean): void; (value: ObservableBoolean<boolean>): void; (value: boolean \| ImmutableObservableBase<boolean> \| ... 4 more ... \| (() => boolean \| ... 1 more ... \| Promise<...>)): void; (value: Promise<...>): void; (value: boolean): void; }`	-
`delete`	`() => void`	-

Source

View on GitHub