[Feature Request] Simpler setup for dark mode

Usage example, including component/hook API

A more abstracted / built in feature to handle colorScheme (mainly light/dark mode). It would improve DX, speed and types. You now need to add the right useState type yoruself const [colorScheme, setColorScheme] = useState<ColorScheme>("dark"); for TS to not complain, which could be hard to figure out for beginners (docs doesn’t mention it afaik).

Also maybe it could handle the localStorage value out of the box as well. (Look to Chakra UI for inspiration).

Example API:

  const { colorMode, toggleColorMode } = useColorMode()

And automatically include the colorMode in the MantineProvider

Possible implementation – describe how the feature can be implemented

Maybe copy most of the setup code in docs to a hook provided by mantine

Do you want to contribute this feature and create a pull request

No response

[rtivital]

No, thanks, it’s a core feature and I need to give it some thought

[rtivital]

I’ve explored this issue and came to the conclusion that the current implementation is the cleanest abstraction that we can provide, so I do not think we will be changing it any time soon.