use-color-scheme hook returns OS color scheme preference
The use-color-scheme hook returns the preferred OS color scheme value ('dark' or 'light') and subscribes to changes in the OS preference.
hooks/use-color-scheme
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
use-color-scheme uses use-media-query under the hood
The use-color-scheme hook relies on use-media-query, which uses the window.matchMedia() API. It always returns the specified initial value (first argument, 'light' by default) if the API is not available, such as during server-side rendering.
use-color-scheme does not calculate initial value on first render by default
By default, to support server-side rendering, use-color-scheme does not calculate the initial value during state initialization on the first render. Instead, the value is calculated in useEffect and updated after the parent component mounts.
getInitialValueInEffect option for use-color-scheme
The getInitialValueInEffect option can be set to false to enable immediate calculation of the initial value on the first render, which is useful when server-side rendering is not used.
use-color-scheme function signature and types
The use-color-scheme hook has the signature: function useColorScheme(initialValue?: UseColorSchemeValue, options?: UseMediaQueryOptions): UseColorSchemeValue. The UseMediaQueryOptions interface has one property: getInitialValueInEffect (boolean). UseColorSchemeValue is a union type of 'dark' or 'light'.
Example: use-color-scheme with default behavior
const colorScheme = useColorScheme('dark'); This returns 'dark' on the server side and returns the computed value on the client side after mount.
Example: use-color-scheme with immediate value calculation
const colorScheme = useColorScheme('light', { getInitialValueInEffect: false }); This enables immediate calculation of the initial value without waiting for useEffect.
UseColorSchemeValue and UseMediaQueryOptions types are exported
The UseColorSchemeValue and UseMediaQueryOptions types can be imported from the @mantine/hooks package: import type { UseColorSchemeValue, UseMediaQueryOptions } from '@mantine/hooks';