当前位置：首页 > article >正文

WHAT - Antd 定制主题之预设算法

article 2024/10/18 23:20:00

Antd 定制主题

官方文档：https://ant.design/docs/react/customize-theme-cn

预设算法

在上述文档中提到了预设算法的使用，那这个功能究竟是什么？

Ant Design 的预设算法（Preset Algorithm）是一套用于主题定制的工具，能够帮助开发者轻松修改和应用全局的设计样式和颜色体系。它基于 Token 系统，允许开发者通过简单的配置调整应用中的配色方案、布局、组件样式等内容。Ant Design 提供了一些常见的预设算法，如亮色模式和暗色模式。

主要概念

Design Token: Design Token 是 Ant Design 设计系统中用来描述设计属性（如颜色、字体、间距等）的最小单位。它们类似于全局变量，可以被灵活地修改以改变整体的样式。
Preset Algorithm: Ant Design 提供了多种预设的主题算法，如：
- 亮色主题（Default Theme）: 默认的明亮配色方案。
- 暗色主题（Dark Theme）: 针对暗色背景的主题方案。
- 压缩算法（Compact Theme）: 用于提供更紧凑的布局和间距，通常在表单、数据密集型应用中使用。

主题定制的实现

Ant Design 使用 @ant-design/cssinjs 来支持动态主题和基于 Design Token 的样式管理。通过这些 Token 和算法，开发者可以快速应用和切换主题，而无需逐个手动修改每个组件的样式。

有关 cssinjs 可以阅读：WHAT - CSS Modules、Tailwind CSS 和 CSS-in-JS

使用预设算法

在 Ant Design 中，可以通过传入预设的算法来配置主题，比如亮色和暗色主题。

示例：切换亮色与暗色主题

import React, { useState } from 'react';
import { ConfigProvider, Button } from 'antd';
import { defaultAlgorithm, darkAlgorithm } from 'antd/es/theme';

const App = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
    <ConfigProvider
      theme={{
        algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
      }}
    >
      <div style={{ padding: 24 }}>
        <Button type="primary" onClick={() => setIsDarkMode(!isDarkMode)}>
          切换 {isDarkMode ? '亮色模式' : '暗色模式'}
        </Button>
      </div>
    </ConfigProvider>
  );
};

export default App;