如何在ant design中添加自定义动态主题

Question

我想根据来自 API 的主题更改整个应用程序的主题。

我当前的实现：

我使用了 Antd Docs 中提到的这些步骤，它非常适合静态自定义主题。 （对于配置中所做的任何更改，必须重新运行服务器）

这不符合我当前的要求，因为应用程序无法停止并重新运行。

Answer 1

Antd 支持动态主题

您可以按照Antd官方Docs来实现。

这是一个简单的 codesandbox 来开始。

但是，如果您选择不采用实验方法，还有另一种方法可以使用插件来实现动态主题。

查看这个简单的指南即可开始

注意：该项目并未得到积极维护。请谨慎使用。

Answer 2

最近我定制了Ant design v5主题来支持多个主题，只需要更改colors.ts文件和算法（深色，默认），我在下面提到，在这里我分享正确的文件夹结构，如果你喜欢，请投票以求更好到达。

先决条件：

1. 了解 ant design v5 主题。
2. 了解 TypeScript，如果您仅使用 Javascript，则可以忽略类型。

资源：

1. https://ant.design/docs/react/customize-theme
2. https://ant.design/theme-editor

您可以使用主题来获取准确的配置属性，并且在更改时，您将通过使用主题编辑器了解到底发生了什么变化。

Ant design 主题编辑器将对您的开发有很大帮助。

为您的反应应用程序创建以下文件夹结构。

这是颜色真实性的单一来源。我曾经修改过基础、令牌和组件的颜色。

color.ts
export type ColorsType = {
  colorBgBase: string;
  colorPrimary: string;
  colorSecondary: string;
  colorTertiary: string;
  bgWhite: string;
};

export const colors: ColorsType = {
  colorBgBase: '#000000',
  colorPrimary: '#f59600',
  colorSecondary: '#1e2021',
  colorTertiary: '#3c3d40',
  bgWhite: '#ffffff',
};

token.ts 存储下面的所有配置值、边距、填充、颜色，我修改了主要颜色、基础颜色和容器颜色。默认情况下，它们拥有所有令牌，甚至我们可以使用 Ant 设计提供的 useToken 钩子来访问和使用它们。

token.ts
import { colors } from '@/theming/colors';
import { AliasToken } from '@/common/SSComp/SSComp';
const { colorBgBase, colorPrimary, colorSecondary, bgWhite } = colors;

export const token: Partial<AliasToken> = {
  colorPrimary: colorPrimary,
  colorBgBase: colorBgBase,
  colorBgContainer: colorSecondary,
  colorWhite: bgWhite,
  fontSizeSM: 0,
  lineHeightHeading2: 0,
};

使用 component.ts 文件，您可以通过调整边距、填充、颜色和其他属性来自定义特定的 Antd 组件以满足您的要求。在下面的示例中，我修改了菜单和布局组件，相同的原则适用于每个 Antd 组件。

components.ts
import { colors } from '@/theming/colors';
import { ComponentsConfig } from '@/common/SSComp/SSComp';
const { colorPrimary, colorSecondary, colorTertiary, bgWhite } = colors;

export const components: ComponentsConfig = {
  Layout: {
    headerBg: colorSecondary,
    siderBg: colorSecondary,
  },
  Menu: {
    itemColor: colorPrimary,
    itemSelectedColor: bgWhite,
    itemHoverBg: colorTertiary,
    itemSelectedBg: colorTertiary,
    colorBgContainer: colorSecondary,
    itemBorderRadius: 20,
    colorIconHover: bgWhite,
    itemHoverColor: colorPrimary,
  },
};

这是您需要用作 AppWrapper 的 MainConfig。

themeConfig.ts
import { theme, ThemeConfig } from '@/common/SSComp/SSComp';
import { token } from '@/theming/token';
import { components } from '@/theming/components';

export const themeConfig: ThemeConfig = {
  token,
  components,
  algorithm: theme.darkAlgorithm,
};

应用程序.tsx

import { themeConfig } from '@/theming/themeConfig';

<ConfigProvider theme={themeConfig}>
    <AppLayout>
       <CustomComp>Main app wrapper</CustomComp>
    </AppLayout>
</ConfigProvider>

使用以下方法访问令牌配置。

import { theme } from 'antd';
const { useToken } = theme;
const { token } = useToken();

Got the token, Now you can use the property.
Example:
suppose want to access colorPrimary and apply to a div.

const { colorPrimary } = token;
<div style={{ backgroundColor:colorPrimary }></div>

感谢您耐心阅读到这里，如果对您有帮助，请点赞。

如果您喜欢这种方法或想讨论，请随时与我联系：https://www.linkedin.com/in/afrozquraishi/