Skip to main content
Version: 4.xx.xx

Theme

Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored. You can either create your own theme object or use themes that provide from Refine. Theme provides a way to your app's design to meet them.

For more information, refer to the Mantine documentation

Predefined Themes

If you don't want to use the default Mantine theme, RefineThemes has predefined themes for you. You can import predefined themes from the @refinedev/mantine package.

const { Blue, Purple, Magenta, Red, Orange, Yellow } = RefineThemes;
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, RefineThemes } from "@refinedev/mantine";

import { MantineProvider } from "@mantine/core";

const App: React.FC = () => {
return (
<MantineProvider theme={RefineThemes.Blue}>
<Refine
/* ... */
>
<ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>
</Refine>
</MantineProvider>
);
};

You can see how themes change the look of the application in this example.

Theme customization

<MantineProvider/> component can be used to change the theme. It is not required if you decide to use the default theme. You can also use RefineThemes provided by Refine.

localhost:3000
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
ThemedLayoutV2,
useNotificationProvider,
ErrorComponent,
RefineThemes,
} from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import { NotificationsProvider } from "@mantine/notifications";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { PostCreate, PostEdit, PostList } from "./pages";

const App = () => {
return (
<MantineProvider
theme={RefineThemes.Blue}
withNormalizeCSS
withGlobalStyles
>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
notificationProvider={useNotificationProvider}
resources={[
{
name: "posts",
list: "/posts",
edit: "/posts/edit/:id",
create: "/posts/create",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
}
>
<Route path="posts">
<Route index element={<PostList />} />
<Route path="create" element={<PostCreate />} />
<Route path="edit/:id" element={<PostEdit />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
</NotificationsProvider>
</MantineProvider>
);
};

For more information, refer to the <MantineProvider/> documentation

Overriding the Refine themes

You can override or extend the default Refine themes. You can also create your own theme. Let's see how you can do this:

localhost:3000
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
ThemedLayoutV2,
useNotificationProvider,
ErrorComponent,
RefineThemes,
} from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import { NotificationsProvider } from "@mantine/notifications";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { PostCreate, PostEdit, PostList } from "./pages";

const App = () => {
return (
<MantineProvider
theme={{
...RefineThemes.Blue,
colors: {
brand: [
"#ECF9F8",
"#C9EEEC",
"#A6E2E1",
"#84D7D5",
"#61CCC9",
"#3EC1BD",
"#329A97",
"#257471",
"#194D4B",
"#0C2726",
],
},
globalStyles: (theme: MantineTheme) => ({
body: {
backgroundColor: "#84D7D5",
},
}),
}}
withNormalizeCSS
withGlobalStyles
>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
notificationProvider={useNotificationProvider}
resources={[
{
name: "posts",
list: "/posts",
edit: "/posts/edit/:id",
create: "/posts/create",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
}
>
<Route path="posts">
<Route index element={<PostList />} />
<Route path="create" element={<PostCreate />} />
<Route path="edit/:id" element={<PostEdit />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
</NotificationsProvider>
</MantineProvider>
);
};

For more information, refer to the Mantine colors documentation

Theme switching

You can switch between themes as Mantine mentioned in its documentation. You can see an example of using local storage to store the theme below.

localhost:3000
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
ThemedLayoutV2,
ErrorComponent,
useNotificationProvider,
RefineThemes,
} from "@refinedev/mantine";
import { NotificationsProvider } from "@mantine/notifications";
import {
MantineProvider,
Global,
useMantineColorScheme,
Header as MantineHeader,
Group,
ActionIcon,
ColorScheme,
ColorSchemeProvider,
} from "@mantine/core";
import { useLocalStorage } from "@mantine/hooks";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { IconSun, IconMoonStars } from "@tabler/icons";

import { PostCreate, PostEdit, PostList } from "./pages";

const Header = () => {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";

return (
<MantineHeader height={50} p="xs">
<Group position="right">
<ActionIcon
variant="outline"
color={dark ? "yellow" : "primary"}
onClick={() => toggleColorScheme()}
title="Toggle color scheme"
>
{dark ? <IconSun /> : <IconMoonStars />}
</ActionIcon>
</Group>
</MantineHeader>
);
};

const App = () => {
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
key: "mantine-color-scheme",
defaultValue: "light",
getInitialValueInEffect: true,
});

const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));

return (
<ColorSchemeProvider
colorScheme={colorScheme}
toggleColorScheme={toggleColorScheme}
>
<MantineProvider
theme={{
...RefineThemes.Blue,
colorScheme: colorScheme,
}}
withNormalizeCSS
withGlobalStyles
>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
notificationProvider={useNotificationProvider}
resources={[
{
name: "posts",
list: "/posts",
edit: "/posts/edit/:id",
create: "/posts/create",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2
Header={Header}
>
<Outlet />
</ThemedLayoutV2>
}
>
<Route path="posts">
<Route index element={<PostList />} />
<Route path="create" element={<PostCreate />} />
<Route path="edit/:id" element={<PostEdit />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
</NotificationsProvider>
</MantineProvider>
</ColorSchemeProvider>
);
};

For more information, refer to the Mantine dark theme documentation

If you want to customize the default layout elements provided with @refinedev/mantine package, check out the Custom ThemedLayout tutorial.