再见二丁目 | yitimo的个人日志

再见二丁目

动态切换antd主题色配置

发布于: 2019-04-07 13:22

此文章久未修订,请自行甄别内容准确性。

Ant Design官网介绍了其主题色能力,并且相对模糊的提到了通过less来动态切换主题色的方案(底部社区教程中)。而ant.design本身看起来也是用同一方案实现了动态主题色切换。本文将介绍并配置此动态主题方案,即侧重antd-theme-webpack-plugin这个插件配合antd+react的使用,以后再另行介绍lessmodifyVars原理。

项目准备

首先准备两个less文件用于定义全局的主题样式,比如笔者放在了src/styles下:

Add global less

_var.less中引入antd默认样式:

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

除此之外项目中的其他自定义变量都可以在这里定义。

global.less中引入_var.less,这里面定义所有的全局样式,比如先来一个class:

@import './_var.less';
/**
 * 此处定义整个应用所有组件的主题样式
 * 组件自己的less(即其他所有less)均无法使用定制主题色,而是使用默认主题色
 */

.primary {
    background: @primary-color;
}

然后记得在应用中引入global.less,比如index.js中:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/global.less';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

webpack配置

在webpack配置中需要新增一个plugin即一开始安装的antd-theme-webpack-plugin。在HtmlWebpackPlugin之后添加这个插件:

new AntDesignThemePlugin({
    indexFileName: 'index.html',
    antDir: path.resolve(__dirname, '../node_modules/antd'),
    stylesDir: path.resolve(__dirname, '../src/styles'),
    varFile: path.resolve(__dirname, '../src/styles/_var.less'),
    mainLessFile: path.resolve(__dirname, '../src/styles/global.less'),
    themeVariables: [
        '@primary-color'
    ],
}),

根据不同项目需要各自指定正确的路径配置,其中antDirstylesDirvarFilemainLessFile各自对应antd依赖位置、上面定义的styles目录位置、变量less位置、全局less位置。

themeVariables用于指定需要替换颜色的变量名,根据自己需求配置。

indexFileName

配置中的indexFileName字段为index.html,实际上当项目的index.html位置变化时,都必须指定正确的路径,此配置的作用是由插件来自动注入全局less到index.html,如果找不到或者为指定这个字段,则需要手动往项目的index.html中添加这样的配置:

<link rel="stylesheet/less" type="text/css" href="color.less" />
<script>window.less = { async: false, env: 'production', javascriptEnabled: true };</script>
<script type="text/javascript" src="assets/less.min.js"></script>

这三行代码做的事情是:

  1. 引入一个color.less,此文件由之后less生成。
  2. 配置全局less,如果是3.x版本需要配置javascriptEnabled: trueantd-theme-webpack-plugin自动生成的话目前使用的是2.7.2版本的CDN。
  3. 全局引入less,与项目中自行配置的less不同,此less专门用于指定的这两个less和antd内部样式,而项目中的less则用于具体组件样式(所以只有antd内部和指定的_var.lessglobal.less支持动态更改主题色)。

换句话说,你只要检查最终生成的index.html有没有自动注入这三行less配置(或者手动配置)就能判断是否配置成功。

总结

关于使用,做法是在需要初始化或切换主题色的地方通过window.less.modifyVars({antd主题色名: 自定义颜色值})来设置主题色。

至此最简单的支持动态切换主题的antd项目已经配置好了,以下是笔者发现的几个坑点: