demo

框架選擇： create-react-app + mobx + webpack5 + antdesign

說明

安裝 

antd-theme-generator

缺點： 需要配合 LESS v2.7.x 使用，不兼容IE。

cnpm install antd-theme-generator -S

添加主題切換文件 color.js

根目錄下添加文件 color.js ，添加配置內容：

const path = require('path');const { generateTheme, } = require('antd-theme-generator');const options = { stylesDir: path.join(__dirname, './src/css'), antDir: path.join(__dirname, './node_modules/antd'), varFile: path.join(__dirname, './src/css/variables.less'), mainLessFile: path.join(__dirname, './src/css/index.less'), themeVariables: [ //需要動態切換的主題變量  '@primary-color',  '@secondary-color',  '@text-color',  '@text-color-secondary',  '@heading-color',  '@layout-body-background' ], indexFileName: 'index.html', outputFilePath: path.join(__dirname, './public/color.less'), //頁面引入的主題變量文件}generateTheme(options).then(less => { console.log('Theme generated successfully');}).catch(error => { console.log('Error', error);});

CSS 文件下添加less文件

添加 variables.less 文件：

@import "~antd/lib/style/themes/default.less"; //引入antd的變量文件，實現變量的覆蓋@primary-color: #1DA57A;@link-color: #1DA57A;@btn-primary-bg:#1DA57A;

HTML文件中加入全局less配置

index.html 中加入全局 less 變量配置，從而使 less 的 modifyVars 方法可以全局使用，切換主題時覆蓋 default.less 中的變量：

<!-- 使用自動生成的color.less，主要路徑與index.html文件同級 --><link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/color.less" rel="external nofollow" /> <script> window.less = {  async: false,  env: 'production' };</script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

項目啟動處修改

修改項目運行配置 package.json ，項目運行的同時完成頁面color文件的配置