Detect user system color scheme with window.matchMedia API


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}