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.
For more information, refer to the Ant Design documentation about theme customization →
Predefined Themes
RefineThemes has predefined themes that you can use by importing them from @refinedev/antd package.
const { Blue, Purple, Magenta, Red, Orange, Yellow } = RefineThemes;
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, RefineThemes } from "@refinedev/antd";
import { ConfigProvider } from "antd";
const App: React.FC = () => {
return (
<ConfigProvider theme={RefineThemes.Blue}>
<Refine
/* ... */
>
<ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>
</Refine>
</ConfigProvider>
);
};
If you want to see how themes change the look of the application, check out this example.
Theme customization
The <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, or create your own themes. Here is how you create your own:
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } 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
/* ... */
>
<ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>
</Refine>
</ConfigProvider>
);
};
Use Preset Algorithms
Themes with different styles can be quickly generated by modifying the algorithm. Ant Design 5.0 provides three sets of preset algorithms by default, which are the default algorithm: theme.defaultAlgorithm, the dark algorithm: theme.darkAlgorithm and the compact algorithm: theme.compactAlgorithm. You can switch between algorithms by modifying the algorithm property of theme in <ConfigProvider/>.
For more information, refer to the Ant Design documentation on customizing themes→
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 { ThemedLayoutV2 } 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
/* ... */
>
<ThemedLayoutV2 Header={Header}>{/* ... */}</ThemedLayoutV2>
</Refine>
</ConfigProvider>
);
};
If you want to customize the default layout elements provided with @refinedev/antd package, check out the Custom Layout tutorial.
Example
npm create refine-app@latest -- --example customization-theme-antd