use-color-scheme

Detects user system color scheme with window.matchMedia API

Import

Usage

use-color-scheme hook returns system color scheme value i.e. either dark or light:

Your system color scheme is light
import { Badge } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';

function Demo() {
  const colorScheme = useColorScheme();

  return (
    <Badge color={colorScheme === 'dark' ? 'blue' : 'teal'} variant="filled">
      Your system color scheme is {colorScheme}
    </Badge>
  );
}

Hook uses use-media-query hook under the hood. It relies on window.matchMedia() API and always returns light if the API is not available (e.g. during server side rendering) unless an initial value is provided in the first argument.

Definition

function useColorScheme(
  initialValue?: 'dark' | 'light',
  options?: {
    getInitialValueInEffect: boolean;
  }
): 'dark' | 'light';