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:
You can customize these values the same way as other colors:
theme.colors.dark shade is considered to be the body background color and
theme.colors.dark shade is used 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:
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
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:
Saving color scheme in cookie is the easiest way to prevent color scheme mismatch. This strategy can be applied to any framework/library that has server side rendering support. The following example shows how to store color scheme in cookie with Next.js:
Full code is available in Mantine Next.js template.