2023年6月21日发(作者：)
react实现线上主题动态切换功能框架选择： create-react-app + mobx + webpack5 + antdesign说明由于最近公司有多个主题的共存性，所以需要实现线上主题切换的功能，所以本⽂主要描述的是基于create-react-app之上的主题切换。CSS切换有考虑过根据⽤户选择的主题在切换的时候选择加载页⾯css⽂件的区分⽅案，但是考虑到这种形式需要在页⾯切换的时候去reload，因为htmlDOM是在css与JS的结合产物，⽤户体验不是很好。Less切换单纯引⼊所有的less⽂件去做切换，这样不能实现css的动态加载了，会增加⽆⽤css⽂件的加载最后通过⽐较及查询，获取到第三⽅插件：功能实现原则：使⽤ less 的 modifyVars 完成 antd 的主题变量替换。安装
antd-theme-generator缺点： 需要配合
LESS v2.7.x 使⽤，不兼容IE。cnpm install antd-theme-generator -S添加主题切换⽂件
根⽬录下添加⽂件，添加配置内容：const path = require('path');const { generateTheme, } = require('antd-theme-generator');const options = { stylesDir: (__dirname, './src/css'), antDir: (__dirname, './node_modules/antd'), varFile: (__dirname, './src/css/'), mainLessFile: (__dirname, './src/css/'), themeVariables: [ //需要动态切换的主题变量 '@primary-color', '@secondary-color', '@text-color', '@text-color-secondary', '@heading-color', '@layout-body-background' ], indexFileName: '', outputFilePath: (__dirname, './public/'), //页⾯引⼊的主题变量⽂件}generateTheme(options).then(less => { ('Theme generated successfully');}).catch(error => { ('Error', error);});CSS ⽂件下添加less⽂件添加
⽂件：@import "~antd/lib/style/themes/"; //引⼊antd的变量⽂件，实现变量的覆盖@primary-color: #1DA57A;@link-color: #1DA57A;@btn-primary-bg:#1DA57A;HTML⽂件中加⼊全局less配置中加⼊全局less变量配置，从⽽使less的modifyVars⽅法可以全局使⽤，切换主题时覆盖中的变量：
项⽬启动处修改修改项⽬运⾏配置，项⽬运⾏的同时完成页⾯color⽂件的配置"scripts": { "start": "node color && node scripts/", "build": "node color && node scripts/", "test": " node color && node scripts/"},页⾯调⽤⽅法切换主题页⾯点击主题切换配置，这样写的缘故是因为我配置的变量不同： Vars( { '@primary-color': '#aaa', '@menu-dark-item-active-bg':'#aaa', '@link-color': '#aaa', '@text-color':'#aaa', '@btn-primary-bg': '#aaa', }).then(() => {
s('主题切换成功')}).catch(error => { (`主题切换失败`); (error)});由于之后的配置中新增的样式需要遵循主题配置的可以选择使⽤统⼀变量，所以变量设置的时候，可以添加var(--PC)的全局变量设置
2023年6月21日发(作者：)
react实现线上主题动态切换功能框架选择： create-react-app + mobx + webpack5 + antdesign说明由于最近公司有多个主题的共存性，所以需要实现线上主题切换的功能，所以本⽂主要描述的是基于create-react-app之上的主题切换。CSS切换有考虑过根据⽤户选择的主题在切换的时候选择加载页⾯css⽂件的区分⽅案，但是考虑到这种形式需要在页⾯切换的时候去reload，因为htmlDOM是在css与JS的结合产物，⽤户体验不是很好。Less切换单纯引⼊所有的less⽂件去做切换，这样不能实现css的动态加载了，会增加⽆⽤css⽂件的加载最后通过⽐较及查询，获取到第三⽅插件：功能实现原则：使⽤ less 的 modifyVars 完成 antd 的主题变量替换。安装
antd-theme-generator缺点： 需要配合
LESS v2.7.x 使⽤，不兼容IE。cnpm install antd-theme-generator -S添加主题切换⽂件
根⽬录下添加⽂件，添加配置内容：const path = require('path');const { generateTheme, } = require('antd-theme-generator');const options = { stylesDir: (__dirname, './src/css'), antDir: (__dirname, './node_modules/antd'), varFile: (__dirname, './src/css/'), mainLessFile: (__dirname, './src/css/'), themeVariables: [ //需要动态切换的主题变量 '@primary-color', '@secondary-color', '@text-color', '@text-color-secondary', '@heading-color', '@layout-body-background' ], indexFileName: '', outputFilePath: (__dirname, './public/'), //页⾯引⼊的主题变量⽂件}generateTheme(options).then(less => { ('Theme generated successfully');}).catch(error => { ('Error', error);});CSS ⽂件下添加less⽂件添加
⽂件：@import "~antd/lib/style/themes/"; //引⼊antd的变量⽂件，实现变量的覆盖@primary-color: #1DA57A;@link-color: #1DA57A;@btn-primary-bg:#1DA57A;HTML⽂件中加⼊全局less配置中加⼊全局less变量配置，从⽽使less的modifyVars⽅法可以全局使⽤，切换主题时覆盖中的变量：
项⽬启动处修改修改项⽬运⾏配置，项⽬运⾏的同时完成页⾯color⽂件的配置"scripts": { "start": "node color && node scripts/", "build": "node color && node scripts/", "test": " node color && node scripts/"},页⾯调⽤⽅法切换主题页⾯点击主题切换配置，这样写的缘故是因为我配置的变量不同： Vars( { '@primary-color': '#aaa', '@menu-dark-item-active-bg':'#aaa', '@link-color': '#aaa', '@text-color':'#aaa', '@btn-primary-bg': '#aaa', }).then(() => {
s('主题切换成功')}).catch(error => { (`主题切换失败`); (error)});由于之后的配置中新增的样式需要遵循主题配置的可以选择使⽤统⼀变量，所以变量设置的时候，可以添加var(--PC)的全局变量设置
发布评论