use-color-scheme

Detect user system color scheme with window.matchMedia API
Import

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>
);
}
Build fully functional accessible web applications with ease
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