usePrefersColorScheme

The operating system colour scheme: 'light' or 'dark'.

HooksEnvironment@gaudi/design-system/hooks/environment/use-prefers-color-schemeView in Storybook Source

Follows the system preference live. This is not the site theme: read the active theme from the theme provider, and use this hook for system-default choices such as an embed or a chart palette.

Usage

import { usePrefersColorScheme } from '@gaudi/design-system/hooks';
const scheme = usePrefersColorScheme();

Examples

System default for an embed

Storybook

API

1 option

1 return value

Accessibility

Both schemes must meet contrast requirements; use Gaudi tokens, which resolve per theme.

Notes

Built on useMediaQuery.

useMediaQueryTrack a CSS media query, SSR-safe.useDocumentTitleSet a document title and restore the previous owner on cleanup.useIsClientFalse on the server and during hydration, true on the client.useIsMobileTrue below the 768px phone breakpoint.useIsMountedA stable getter for whether this hook is currently mounted.useOnlineStatusWhether the browser reports a network connection.