Detects user system color scheme with window.matchMedia API



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}

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.


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