让页面变变脸-- ant-design主题切换攻略

2023-10-09 04:58:37

在项目中使用主题切换已经成为了一种常见的需求，例如暗黑模式和浅色模式之间的切换、支持多种风格切换等等。随着UI框架的不断发展，主题切换也变得越来越容易实现。以ant-design为例，它提供了一系列内置主题，并支持自定义主题，让我们可以轻松地实现主题切换。

要实现ant-design的主题切换，我们可以使用以下步骤：

安装 antd-theme-webpack-plugin 插件：

npm install --save antd-theme-webpack-plugin

在项目中创建 theme.less 文件，该文件用于定义主题变量：

@import "~antd/lib/style/themes/default.less";

// 自定义主题变量
@primary-color: #1DA57A; // 主题色
@link-color: #1DA57A; // 链接色
@success-color: #52C41A; // 成功色
@warning-color: #FAAD14; // 警告色
@error-color: #F5222D; // 错误色
@font-size-base: 14px; // 基础字体大小

在 webpack 配置文件中添加 antd-theme-webpack-plugin 插件：

const AntdThemePlugin = require('antd-theme-webpack-plugin');

module.exports = {
  plugins: [
    new AntdThemePlugin({
      themeFile: './theme.less',
    }),
  ],
};

在组件中使用 ThemeProvider 组件来应用主题：

import { ThemeProvider } from 'antd';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Layout>
        {/* 组件内容 */}
      </Layout>
    </ThemeProvider>
  );
};