All mantine components support dark color scheme natively without any additional steps.
To use dark color scheme wrap your application in MantineProvider and specify
theme.colors.dark values to style components with dark color scheme.
Default colors have purple-blue accent:
You can customize these values just like any other color:
theme.colors.dark shade is considered to be the body background color and
theme.colors.dark shade as text color with dark color scheme.
You can create these styles on your own or add them by setting
withGlobalStyles prop on MantineProvider, which includes them by default.
Usually global styles are added on top level component inside MantineProvider:
Mantine support dynamic color scheme change and exports
help you set up color scheme context:
And then consume
ColorSchemeProvider context with
useMantineColorScheme hook at any place of your app:
If you want to replicate dark theme behavior of Mantine docs website use use-local-storage-value
hook to store theme state in localStorage and sync it across all opened tabs and use-hotkeys
Ctrl/⌘ + J keyboard shortcut for theme toggle:
Usually saving value to localStorage is not the best strategy as it will create FART. If it is possible store user preferred color scheme on server and serve your application without flashes.
For example, Mantine docs are deployed to gh-pages and do not have server (website is fully static) – in this case if you refresh the page with dark theme, first you will see the prerendered light theme and your selected dark theme will be applied only after a few moments.
You can detect user preferred color scheme with media query or use-color-scheme hook and set is as default value: