useMantineColorScheme

manage the active color scheme

We want to read or set the currently active colorScheme, aka dark or light mode. useMantineColorScheme provides a getter and a setter:

const { colorScheme, setColorScheme, toggleColorScheme } = useMantineColorScheme()

backed by localStorage

Mantine saves the active colorScheme in localStorage and reads from it.

Before the App appears on-screen, Mantine reads localStorage for any saved colorScheme, so the first paint is done with the correct colorScheme.

We can revert localStorage to the default color scheme, the one set by the Mantine provider:

const { clearColorScheme } = useMantineColorScheme()

separate from useColorScheme

useColorScheme is a different hook, that reads the device's OS color scheme, and that is used much less often.