前端切换主题颜色的几种思路

如果主题提前配置好是固定的：
1.采用配置不同theme的css文件，使用scss+替换body的class命名空间进行样式覆盖

目录

setting.scss

$theme-name: 'red';
$primary-color:red;

common.scss

.theme-#{$theme-name}{
  .theme-border{
    border: 2px solid $primary-color;
  }
  .theme-color{
    color:$primary-color
  }
}

最后形成两个主题文件后，修改body的class就可达到切换主题的目的

2.引用不同的link文件，与上述同理先形成css文件，通过动态改变link引用达到切换主题目的

如果主题不固定的，可借用webpack插件：webpack-theme-color-replacer实现：
vue-cli3配置

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
const appConfig = require('./config/app-config.js')
module.exports = {
  configureWebpack: {
    plugins: [
    // 生成仅包含颜色的替换样式（主题色等）
      new ThemeColorReplacer({
        fileName: 'style/theme-colors.[contenthash:8].css',
        matchColors: [
        ...forElementUI.getElementUISeries(appConfig.themeColor)
      ],
      changeSelector: forElementUI.changeSelector,
      isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined
    })
  ]
 }
}

app-config.js文件

module.exports = {
   themeColor: '#409EFF' 
}

配置babel.config.js

 plugins: [
    [
    'babel-plugin-component',
    {
    libraryName: 'element-ui',
    // styleLibraryName: '~node_modules/element-theme-chalk/src',
    styleLibraryName: '~node_modules/element-ui/packages/theme-chalk/src',
    ext: '.scss'
    }
    ]
  ]

在utils文件中定义一个themeColorClient.js 用于初始化主题色和记录主题色

import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
import appConfig from '../../config/app-config.js'

export let curColor = appConfig.themeColor

// 动态切换主题色
export function changeThemeColor(newColor) {
    const options = {
        newColors: [...forElementUI.getElementUISeries(newColor), '#ff0000', '#ffff00'],
    }
    return client.changer.changeColor(options, Promise)
        .then(() => {
            curColor = newColor
            localStorage.setItem('theme_color', curColor)
        });
}

export function initThemeColor() {
    const savedColor = localStorage.getItem('theme_color')
    if (savedColor) {
        curColor = savedColor
        return changeThemeColor(savedColor)
    }
    return Promise.resolve()
}

除了修改elementUI主题色之外，我们还需要配置其他自己写的样式，需要用到element ui中定义的一些变量
可通过引用@import "../../../node_modules/element-ui/packages/theme-chalk/src/common/var.scss"; 获得element-ui中的变量，并使用，这样可达到一起切换主题效果