Dark theme

All mantine components support dark color scheme natively without any additional steps. To use dark color scheme wrap your application in MantineProvider and specify colorScheme:

import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider theme={{ colorScheme: 'dark' }}>
<App />
</MantineProvider>
);
}

Colors

Mantine uses theme.colors.dark values to style components with dark color scheme. Default colors have purple-blue accent:

dark 0
#C1C2C5
dark 1
#A6A7AB
dark 2
#909296
dark 3
#5c5f66
dark 4
#373A40
dark 5
#2C2E33
dark 6
#25262b
dark 7
#1A1B1E
dark 8
#141517
dark 9
#101113

You can customize these values just like any other color:

<MantineProvider
theme={{
colorScheme: 'dark',
colors: {
// override dark colors here to change them for all components
dark: [
'#d5d7e0',
'#acaebf',
'#8c8fa3',
'#666980',
'#4d4f66',
'#34354a',
'#2b2c3d',
'#1d1e30',
'#0c0d21',
'#01010a',
],
},
}}
>
<App />
</MantineProvider>

Global styles

theme.colors.dark[7] shade is considered to be the body background color and theme.colors.dark[0] 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:

import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider theme={{ colorScheme: 'dark' }} withGlobalStyles>
<YourApp />
</MantineProvider>
);
}

ColorSchemeProvider

Mantine support dynamic color scheme change and exports ColorSchemeProvider to help you set up color scheme context:

import { MantineProvider, ColorSchemeProvider, ColorScheme } from '@mantine/core';
export default function Demo() {
const [colorScheme, setColorScheme] = useState('light');
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider theme={{ colorScheme }}>
<App />
</MantineProvider>
</ColorSchemeProvider>
);
}

And then consume ColorSchemeProvider context with useMantineColorScheme hook at any place of your app:

import { ActionIcon, useMantineColorScheme } from '@mantine/core';
import { SunIcon, MoonIcon } from '@modulz/radix-icons';
function Demo() {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
return (
<ActionIcon
variant="outline"
color={dark ? 'yellow' : 'blue'}
onClick={() => toggleColorScheme()}
title="Toggle color scheme"
>
{dark ? (
<SunIcon style={{ width: 18, height: 18 }} />
) : (
<MoonIcon style={{ width: 18, height: 18 }} />
)}
</ActionIcon>
);
}

Save to localStorage and add keyboard shortcut

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 to add Ctrl/⌘ + J keyboard shortcut for theme toggle:

import { MantineProvider, ColorSchemeProvider, ColorScheme } from '@mantine/core';
import { useWindowEvent, useLocalStorageValue } from '@mantine/hooks';
export default function Demo() {
const [colorScheme, setColorScheme] = useLocalStorageValue({
key: 'mantine-color-scheme',
defaultValue: 'light',
});
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
useHotkeys([['mod+J', () => toggleColorScheme()]]);
return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider theme={{ colorScheme }}>
<App />
</MantineProvider>
</ColorSchemeProvider>
);
}

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.

Detect user preferred color scheme

You can detect user preferred color scheme with media query or use-color-scheme hook and set is as default value:

import { MantineProvider } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import ColorSchemeContext from './ColorSchemeContext';
export default function Demo() {
// hook will return either 'dark' or 'light' on client
// and always 'light' during ssr as window.matchMedia is not available
const preferredColorScheme = useColorScheme();
const [colorScheme, setColorScheme] = useState(preferredColorScheme);
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider theme={{ colorScheme }}>
<App />
</MantineProvider>
</ColorSchemeProvider>
);
}
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback