Returns OS color scheme preference and subscribes to changes
The use-color-scheme hook returns the preferred OS color scheme value ( dark or light ) and subscribes to changes:
use-color-scheme uses use-media-query under the hood. It relies on the window.matchMedia() API and always returns the specified initial value (first argument, light by default) if the API is not available (for example, during server-side rendering).
By default, to support server-side rendering, use-color-scheme does not calculate the initial value on the first render during state initialization. Instead, the value is calculated in useEffect and updated after the parent component mounts.
If your application does not have server-side rendering, you can enable immediate calculation of the initial value by changing the getInitialValueInEffect option:
The UseColorSchemeValue and UseMediaQueryOptions types are exported from the @mantine/hooks package; you can import them in your application: