useColorScheme#

The system color-scheme preference as the cross-platform ColorScheme contract. Browser composable — import from @sigx/use-web.

TSX 
import { component, render } from 'sigx';
import { useColorScheme } from '@sigx/use-web';

const Scheme = component(() => {
    const scheme = useColorScheme();
    return () => <p>System prefers: {scheme.value}</p>;
});

render(<Scheme />, "#app");

The return is a ReadSignal<ColorScheme> where ColorScheme is 'light' | 'dark' — no-preference maps to 'light':

TypeScript 
import { effect } from 'sigx';

const scheme = useColorScheme();
effect(() => (document.documentElement.dataset.theme = scheme.value));

ReadSignal preserves the literal union: scheme.value is typed 'light' | 'dark', not widened to string. That's the whole reason single-value returns are structural — see Outputs.

Signature#

TypeScript 
function useColorScheme(options?: UseColorSchemeOptions): ReadSignal<ColorScheme>;

ColorScheme is a cross-platform contract — the same return shape as Lynx's useSystemColorScheme, so theme code ports across platforms unchanged.

Options#

OptionTypeDefaultDescription
ssrDefaultColorScheme'light'Value reported on the server / where matchMedia is unavailable.
windowWindowdefaultWindowOverride the window (SSR/testing). See Configurable*.

SSR#

On the server (no matchMedia) the signal reads ssrDefault — 'light' by default — then reads the real preference on mount.

See also#