Skip to main content
👀 Interested in the latest enterprise backend features of refine? 👉 Join now and get early access!
Documentation
Version: 4.xx.xx

Theme

The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more. You can either create your own theme object or use theme that provide from refine. You can find more information about theme in Chakra UI documentation.

Refer to the Chakra UI documentation for more information about theme. →

Predefined Themes​

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

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

import { ChakraProvider } from "@chakra-ui/react";

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

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

CAUTION

If you want to use <ThemedLayoutV2> you have to wrap your application with <ChakraProvider> component and should give theme prop to it.

You can use RefineThemes provided by refine or you can create your own theme object.

Refer to the Chakra UI documentation for more information about theme. →

Theme customization​

<ChakraProvider/> component can be used to change the theme and other global settings. 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 {
    ErrorComponent,
    ThemedLayoutV2,
    notificationProvider,
    RefineThemes,
} from "@refinedev/chakra-ui";
import {
    ChakraProvider,
    extendTheme,
} from "@chakra-ui/react";

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

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

const App = () => {
    const customTheme = extendTheme({
        ...RefineThemes.Blue,
        colors: {
            sider: {
                background: "#4A5568",
                collapseButton: "#1a202c",
            },
        },
    });

    return (
        <ChakraProvider theme={customTheme}>
            <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>
        </ChakraProvider>
    );
};
INFORMATION

Refer to the refineTheme object in the source code to see the default theme values.. →

Theme switching​

Chakra UI comes with built-in support for managing color mode in your apps. You can manage the color mode on refine applications such as Chakra UI applications.

TIP

Chakra stores the color mode in localStorage and appends a className to the body to ensure the color mode is persistent.

Refer to the Chakra UI documentation for more information about color mode. →

localhost:3000
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
    ErrorComponent,
    ThemedLayoutV2,
    notificationProvider,
    RefineThemes,
} from "@refinedev/chakra-ui";
import {
    ChakraProvider,
    Box,
    IconButton,
    Icon,
    useColorMode,
    extendTheme,
} from "@chakra-ui/react";
import { IconSun, IconMoonStars } from "@tabler/icons";

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

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

const Header = () => {
    const { colorMode, toggleColorMode } = useColorMode();
    return (
        <Box
            py="2"
            px="4"
            display="flex"
            justifyContent="flex-end"
            w="full"
            bg="chakra-body-bg"
        >
            <IconButton
                variant="ghost"
                aria-label="Toggle theme"
                onClick={toggleColorMode}
            >
                <Icon
                    as={colorMode === "light" ? IconMoonStars : IconSun}
                    w="18px"
                    h="18px"
                />
            </IconButton>
        </Box>
    );
};

const App = () => {
    const customTheme = extendTheme({
        ...RefineThemes.Blue,
        config: {
            initialColorMode: "dark",
            useSystemColorMode: false,
        },
    });

    return (
        <ChakraProvider theme={customTheme}>
            <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>
        </ChakraProvider>
    );
};
TIP

If you want to customize the default layout elements provided with @refinedev/chakra-ui package, check out the Custom Layout tutorial.

Previous
<AutoSaveIndicator>
Next
Mantine API