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.

Refer to the Mantine documentation for more information about theme object. →

Predefined Themes

RefineThemes has predefined themes for you. You can use them by importing them from @refinedev/mantine package. It is not required if you decide to use the default Mantine theme.

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>
    );
};

info

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.

http://localhost:3000

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
    ThemedLayoutV2,
    notificationProvider,
    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={notificationProvider}
                        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>
    );
};

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 "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
    ThemedLayoutV2,
    notificationProvider,
    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={notificationProvider}
                        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>
    );
};

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 "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
    ThemedLayoutV2,
    ErrorComponent,
    notificationProvider,
    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={notificationProvider}
                            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>
    );
};

Refer to the Mantine dark theme documentation for more information. →

tip

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