use-color-scheme

Detect user system color scheme with window.matchMedia API

Import

Source

View source code

Docs

Edit this page

Package

@mantine/hooks

Usage

Hook uses use-media-query hook under the hood. Hook relies on window.matchMedia() API and will always return light if api is not available (e.g. during server side rendering).

Hook returns either dark or light value:

Your system color scheme is light

import React from 'react';
import { Badge } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';

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

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