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

use-color-scheme returns 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. Hook relies on window.matchMedia() API and will always return light if the api is not available (e.g. during server side rendering) unless initial value is provided in first argument.

Definition

function useColorScheme(
  initialValue?: 'dark' | 'light',
  options?: {
    getInitialValueInEffect: boolean;
  }
): 'dark' | 'light';
Go back
use-click-outside – @mantine/hooks
Up next
use-element-size – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter