[Feature Request] Simpler setup for dark mode

[HermanNygaard]

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]

Thanks for feature request, we will consider this option

[HermanNygaard]

Awesome, I would be happy to give it a shot with a PR

[rtivital]

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

[dukesx]

I think a good and complete implementation should

1. First check OS Mode
2. Set local storage based on that
3. If user wishes opposite theme (if OS is dark but user wishes light) then it should allow switching/toggling.
4. Should allow override of method like we do right now through context

I am suggesting this because dark mode is somewhat time consuming to set up. Atleast for me since my implementation is as I suggested above. From OS preference to User Preference.

[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.