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 { 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}
Build fully functional accessible web applications faster than ever
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