Theme

Ant Design allows you to customize design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc. Design Tokens are the smallest element that affects the theme. By modifying the Design Token, we can present various themes or components.

Refer to the Ant Design documentation for more information about customizing Ant Design theme. &#8594

Predefined Themes

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

const { Blue, Purple, Magenta, Red, Orange, Yellow } = RefineThemes;

import { Refine } from "@refinedev/core";
import { ThemedLayout, RefineThemes } from "@refinedev/antd";

import { ConfigProvider } from "antd";

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

info

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

Theme customization

<ConfigProvider/> 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.

Overriding the themes

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

import { Refine } from "@refinedev/core";
import { ThemedLayout } from "@refinedev/antd";

import { ConfigProvider } from "antd";

const API_URL = "https://api.fake-rest.refine.dev";

const App: React.FC = () => {
    return (
        <ConfigProvider
            theme={{
                components: {
                    Button: {
                        borderRadius: 0,
                    },
                    Typography: {
                        colorTextHeading: "#1890ff",
                    },
                },
                token: {
                    colorPrimary: "#f0f",
                },
            }}
        >
            <Refine
            /* ... */
            >
                <ThemedLayout>{/* ... */}</ThemedLayout>
            </Refine>
        </ConfigProvider>
    );
};

Use Preset Algorithms

Themes with different styles can be quickly generated by modifying algorithm. Ant Design 5.0 provides three sets of preset algorithms by default, which are default algorithm theme.defaultAlgorithm, dark algorithm theme.darkAlgorithm and compact algorithm theme.compactAlgorithm. You can switch algorithms by modifying the algorithm property of theme in <ConfigProvider/>.

Refer to the Ant Design documentation for more information about customizing Ant Design theme. &#8594

Switching to dark theme

Let's start with adding a switch to the Header component.

import { Space, Button } from "antd";

interface HeaderProps {
    theme: "light" | "dark";
    setTheme: (theme: "light" | "dark") => void;
}

const Header: FC<HeaderProps> = (props) => {
    return (
        <Space
            direction="vertical"
            align="end"
            style={{
                padding: "1rem",
            }}
        >
            <Button
                onClick={() => {
                    props.setTheme(props.theme === "light" ? "dark" : "light");
                }}
                icon={props.theme === "light" ? <IconMoonStars /> : <IconSun />}
            />
        </Space>
    );
};

Then, we can use the theme property of the ConfigProvider component to switch between light and dark themes.

import { Refine } from "@refinedev/core";
import { ThemedLayout } from "@refinedev/antd";
import { ConfigProvider, theme } from "antd";

import { Header } from "./Header";

const App: React.FC = () => {
    const [currentTheme, setCurrentTheme] = useState<"light" | "dark">("dark");

    return (
        <ConfigProvider
            theme={{
                algorithm:
                    currentTheme === "light"
                        ? theme.defaultAlgorithm
                        : theme.darkAlgorithm,
            }}
        >
            <Refine
            /* ... */
            >
                <ThemedLayout Header={Header}>{/* ... */}</ThemedLayout>
            </Refine>
        </ConfigProvider>
    );
};

tip

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

Example

VIEW SOURCE CODE →

RUN IN YOUR LOCAL

npm create refine-app@latest -- --example customization-theme-antd