Skip to main content
Version: 3.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. There are two types of themes: LightTheme and DarkTheme. LightTheme tend to have dark text on a light background, while DarkTheme have light text on a dark background. Theme provides a way to your app's design to meet them.

Refer to the Mantine documentation for more information about theme object. β†’

Theme customization​

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

http://localhost:3000
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
Layout,
MantineProvider,
Global,
NotificationsProvider,
notificationProvider,
DarkTheme,
} from "@pankod/refine-mantine";

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

const App = () => {
return (
<MantineProvider theme={DarkTheme} withNormalizeCSS withGlobalStyles>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev",
)}
notificationProvider={notificationProvider}
Layout={Layout}
resources={[
{
name: "posts",
list: PostList,
edit: PostEdit,
create: PostCreate,
},
]}
/>
</NotificationsProvider>
</MantineProvider>
);
};

Refer to the <MantineProvider/> documentation for more information. β†’

Overriding the refine themes​

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

http://localhost:3000
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
Layout,
MantineProvider,
Global,
NotificationsProvider,
notificationProvider,
LightTheme,
} from "@pankod/refine-mantine";

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

const App = () => {
return (
<MantineProvider
theme={{
...LightTheme,
colors: {
primary: [
"#ECF9F8",
"#C9EEEC",
"#A6E2E1",
"#84D7D5",
"#61CCC9",
"#3EC1BD",
"#329A97",
"#257471",
"#194D4B",
"#0C2726",
],
},
}}
withNormalizeCSS
withGlobalStyles
>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev",
)}
notificationProvider={notificationProvider}
Layout={Layout}
resources={[
{
name: "posts",
list: PostList,
edit: PostEdit,
create: PostCreate,
},
]}
/>
</NotificationsProvider>
</MantineProvider>
);
};

Refer to the Mantine colors documentation for more information. β†’

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.

http://localhost:3000
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import {
Layout,
MantineProvider,
Global,
NotificationsProvider,
notificationProvider,
MantineHeader,
Group,
ActionIcon,
ColorSchemeProvider,
ColorScheme,
LightTheme,
DarkTheme,
useLocalStorage,
useMantineColorScheme,
} from "@pankod/refine-mantine";
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={colorScheme === "dark" ? DarkTheme : LightTheme}
withNormalizeCSS
withGlobalStyles
>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev",
)}
notificationProvider={notificationProvider}
Layout={Layout}
Header={Header}
resources={[
{
name: "posts",
list: PostList,
edit: PostEdit,
create: PostCreate,
},
]}
/>
</NotificationsProvider>
</MantineProvider>
</ColorSchemeProvider>
);
};

Refer to the Mantine dark theme documentation for more information. β†’