前端主题切换方案(react+antd)

本文作者为 360 技术中台数据平台部的前端开发工程师

原文标题：前端主题切换方案

原文地址：https://juejin.cn/post/7117911005841063944

背景

最近有个需求，要给系统做个主题切换功能，网上关于主题的方案挺多，准备做一些调研，因为项目是react+antd的一个后台系统，开始从antd官方文档中开始着手，做下整理对比，最后选一个最佳的方案用于实践。

技术选型

less.modifyVars

antd提供的一种主题切换方式，通过配置webpack的less-loader，添加modifyVars对象，官方已经内置了一些主题变量，每次构建时更换对应色值即可实现主题切换。

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+         modifyVars: {
+