ant design theme

I am trying to create a custom theme on ant design, changing all the colors. can you help me?

6 Replies

Hi @SetiZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'd be happy to help you create a custom theme for Ant Design in your refine application. Refine provides several ways to customize the Ant Design theme. Using ConfigProvider for Theme Customization You can customize the Ant Design theme in your refine application by using the ConfigProvider component from Ant Design. Here's how you can do it:

import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

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

import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

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

This approach allows you to override specific theme tokens and component styles Theme customization. Using Predefined Themes Refine also provides predefined themes that you can use out of the box:

import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, RefineThemes } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

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

import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, RefineThemes } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

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

The available predefined themes are: Blue, Purple, Magenta, Red, Orange, Yellow, and Green Predefined Themes. Switching Between Light and Dark Themes You can also implement a theme switcher to toggle between light and dark themes:

import { ConfigProvider, theme } from "antd";
import { useState } from "react";

const App: React.FC = () => {
  const [currentTheme, setCurrentTheme] = useState<"light" | "dark">("light");
  
  return (
    <ConfigProvider
      theme={{
        algorithm:
          currentTheme === "light"
            ? theme.defaultAlgorithm
            : theme.darkAlgorithm,
      }}
    >
      {/* Your app content */}
    </ConfigProvider>
  );
};

import { ConfigProvider, theme } from "antd";
import { useState } from "react";

const App: React.FC = () => {
  const [currentTheme, setCurrentTheme] = useState<"light" | "dark">("light");
  
  return (
    <ConfigProvider
      theme={{
        algorithm:
          currentTheme === "light"
            ? theme.defaultAlgorithm
            : theme.darkAlgorithm,
      }}
    >
      {/* Your app content */}
    </ConfigProvider>
  );
};

This allows you to switch between Ant Design's default light and dark algorithms Use Preset Algorithms. Examples For more examples and inspiration, you can check out these resources: - Theme customization example - Refine Themes in Ant Design example Remember to import the reset CSS for Ant Design:

import "@refinedev/antd/dist/reset.css";

import "@refinedev/antd/dist/reset.css";

This ensures that the basic styles are properly set up for your themed components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

robust-apricotOP•2w ago

@kapa.ai do you have a full custom theme example?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, I can provide you with a full custom theme example for Ant Design in refine. Here's a comprehensive example based on the knowledge sources: For a complete custom theme implementation, you can check out the customization-theme-antd example that refine provides:

import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

const App: React.FC = () => {
  return (
    <ConfigProvider
      theme={{
        components: {
          Button: {
            borderRadius: 0,
          },
          Typography: {
            colorTextHeading: "#1890ff",
          },
        },
        token: {
          colorPrimary: "#f0f",  // Custom primary color
          colorSuccess: "#52c41a", // Custom success color
          colorWarning: "#faad14", // Custom warning color
          colorError: "#ff4d4f",   // Custom error color
          colorInfo: "#1890ff",    // Custom info color
          borderRadius: 6,         // Global border radius
          wireframe: false,        // Enable/disable wireframe style
        },
      }}
    >
      <AntdApp>
        <Refine
          /* ... your refine configuration ... */
        >
          <ThemedLayoutV2>{/* Your layout content */}</ThemedLayoutV2>
        </Refine>
      </AntdApp>
    </ConfigProvider>
  );
};

import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

const App: React.FC = () => {
  return (
    <ConfigProvider
      theme={{
        components: {
          Button: {
            borderRadius: 0,
          },
          Typography: {
            colorTextHeading: "#1890ff",
          },
        },
        token: {
          colorPrimary: "#f0f",  // Custom primary color
          colorSuccess: "#52c41a", // Custom success color
          colorWarning: "#faad14", // Custom warning color
          colorError: "#ff4d4f",   // Custom error color
          colorInfo: "#1890ff",    // Custom info color
          borderRadius: 6,         // Global border radius
          wireframe: false,        // Enable/disable wireframe style
        },
      }}
    >
      <AntdApp>
        <Refine
          /* ... your refine configuration ... */
        >
          <ThemedLayoutV2>{/* Your layout content */}</ThemedLayoutV2>
        </Refine>
      </AntdApp>
    </ConfigProvider>
  );
};

You can try this full example locally by running:

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

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

Or you can explore it on CodeSandbox: customization-theme-antd example from refine For more examples of theme customization, you can also check out: - Theme Ant Design Demo - Refine Themes in Ant Design These examples provide comprehensive implementations of custom themes in refine with Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

robust-apricotOP•2w ago

if anyone is looking ant-design has a theme editor: https://ant.design/theme-editor

Theme Editor - Ant Design

An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises

ant design theme

Did you find this page helpful?