Ant Design 组件库使用 less 变量实现主题色切换

2024-02-17 21:22:18

前言

在项目开发中，我们经常需要根据不同的场景或用户的喜好来切换主题色，以满足不同的视觉需求。Ant Design 组件库作为目前流行的前端UI框架之一，提供了丰富的组件和样式，同时支持使用 less 变量来修改组件样式。结合 CSS 变量的特性，我们可以轻松实现 Ant Design 组件库的主题色在线换肤。

原理分析

Ant Design 组件库的样式是通过 less 变量来定义的。这些变量可以被修改，从而改变组件的样式。CSS 变量是一种 CSS 特性，允许我们通过 JavaScript 来修改其值，从而改变元素的样式。

实现步骤

1. 安装必要的依赖

npm install antd-theme-webpack-plugin less less-loader --save-dev

2. 配置 webpack

在 webpack 配置文件中，添加以下配置：

module: {
  rules: [
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      ],
    },
  ],
},
plugins: [
  new AntdThemePlugin({
    antDir: 'node_modules/antd',
    stylesDir: './src/styles',
    varFile: './src/styles/variables.less',
    mainLessFile: './src/styles/main.less',
  }),
],

3. 创建 less 变量文件

在项目中创建一个 less 变量文件，例如 src/styles/variables.less，并添加以下内容：

@primary-color: #1890ff; // 主色调
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@text-color: #333; // 文本色
@background-color: #fff; // 背景色

4. 创建主题切换组件

import React, { useState } from 'react';
import { Button } from 'antd';

const ThemeSwitcher = () => {
  const [theme, setTheme] = useState('default');

  const toggleTheme = () => {
    if (theme === 'default') {
      setTheme('dark');
    } else {
      setTheme('default');
    }
  };

  return (
    <Button onClick={toggleTheme}>切换主题</Button>
  );
};

export default ThemeSwitcher;

5. 使用主题切换组件

在项目中使用主题切换组件，例如在 App.js 中：

import ThemeSwitcher from './components/ThemeSwitcher';

function App() {
  return (
    <div className="App">
      <ThemeSwitcher />
      <h1>你好，世界！</h1>
    </div>
  );
}

export default App;