Skip to main content
Unlock powerful debugging and effortless query monitoring with Refine DevtoolsLearn More
RefineDocumentation
Version: 3.xx.xx

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. →

Theme customization​

<ConfigProvider/> component can be used to change theme. It is not required if you decide to use the default theme.

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.

localhost:3000
Live previews only work with the latest documentation.
import { Refine } from "@pankod/refine-core";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router-v6";
import {
  useNotificationProvider,
  Layout,
  ErrorComponent,
  ConfigProvider,
} from "@pankod/refine-antd";

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

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
        dataProvider={dataProvider(API_URL)}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: PostList,
            create: PostCreate,
            edit: PostEdit,
            show: PostShow,
          },
        ]}
        notificationProvider={useNotificationProvider}
        Layout={Layout}
        catchAll={<ErrorComponent />}
      />
    </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. →

Switching to dark theme​

localhost:3000
Live previews only work with the latest documentation.
import { FC, useState } from "react";
import { Button } from "@pankod/refine-antd";
import { Refine } from "@pankod/refine-core";
import {
  useNotificationProvider,
  Layout,
  ErrorComponent,
  ConfigProvider,
  theme,
} from "@pankod/refine-antd";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router-v6";

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

import "@pankod/refine-antd/dist/reset.min.css";

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

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

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

  return (
    <ConfigProvider
      theme={{
        algorithm:
          currentTheme === "light"
            ? theme.defaultAlgorithm
            : theme.darkAlgorithm,
      }}
    >
      <Refine
        dataProvider={dataProvider(API_URL)}
        routerProvider={routerProvider}
        Header={() => (
          <Header theme={currentTheme} setTheme={setCurrentTheme} />
        )}
        resources={[
          {
            name: "posts",
            list: PostList,
            create: PostCreate,
            edit: PostEdit,
            show: PostShow,
          },
        ]}
        notificationProvider={useNotificationProvider}
        Layout={Layout}
        catchAll={<ErrorComponent />}
      />
    </ConfigProvider>
  );
};

Example​

View Source Code
Run on your local
npm create refine-app@latest -- --example customization-theme-antd
Previous
Custom Inputs
Next
Layout