Detect user system color scheme with window.matchMedia API


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}

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.


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