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 { 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>
  );
}

Go back

use-click-outside – @mantine/hooks

Up next

use-element-size – @mantine/hooks

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

Feedback

Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good

Leave feedback

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter