vue 实现主题换肤(element-ui)

站在巨人的肩膀上开发之主题换肤

一. 插件安装

• https://www.npmjs.com/package/webpack-theme-color-replacer

npm i webpack-theme-color-replacer -D

二. 项目使用

2.1 vue.config.js

const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
// 注意自己项目里的引入路径
const appConfig = require('./config/app-config')


module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 生成仅包含颜色的替换样式（主题色等）
      new ThemeColorReplacer({
        fileName: 'style/theme-colors.[contenthash:8].css',
        matchColors: [
          ...forElementUI.getElementUISeries(appConfig.themeColor), // element-ui主色系列
          '#0cdd3a', // 自定义颜色
          '#c655dd'
        ],
        changeSelector: forElementUI.changeSelector,
        isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined
      })
    ]
  }
}

2.2 新建app-config.js

module.exports = {
  LOGIN_PATH: './',
  title: 'vue + webpack4 + element-ui脚手架项目',
  description: 'vue + webpack4 + element-ui脚手架项目',
  themeColor: '#3296fa' // 这个色号必须和主题色是一个颜色才行，要不然出来的css模板文件是空的
}

2.3 新建themeColorClient.js

import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
// 注意自己项目里的引入路径
import appConfig from '../../config/app-config'

export let curColor = appConfig.themeColor

// 动态切换主题色
export function changeThemeColor(newColor) {
  var 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
    changeThemeColor(savedColor)
  }
}

2.4 使用

• main.js 初始化文件

// 覆盖element-ui sass变量的文件夹
import './style/element-variables.scss'

// 主题换肤
import { initThemeColor } from './utils/themeColorClient'
initThemeColor()

• element-variables.scss 文件内的格式

/* 改变主题色变量 */
$--color-primary: #3296fa;
$input-color: #008CEE;
$disabled-color: #F5F7FA;
$--color-text-placeholder: #ccc !default;
$--font-color-disabled-base: #333 !default;

$--background-color-base: #F5F7FA !default;
/* 一级边框颜色 */
$--border-color-base: #C4CBDA !default;

$--radio-button-disabled-checked-fill: #333 !default;
$--select-option-disabled-color: #333 !default;
$--input-fill-disabled: #333 !default;
$--input-disabled-color: #333 !default;

// hover时border颜色
$--border-color-hover: $--color-primary !default;
$--select-border-color-hover: $--border-color-hover !default;
// 获取焦点（输入时）border的颜色
$--select-input-focus-border-color: $input-color !default;
$--select-input-focus-border-color: $--color-primary !default;
$--input-focus-border: $input-color !default;

$--select-option-selected-hover: #EBF5FF !important;
$--select-option-hover-background: #EBF5FF !default;
$--select-option-selected-font-color: $--color-primary !default;
$--select-option-selected-hover: $--color-primary !default;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

• vue文件

<el-color-picker
  size="small"
  @change="changeColor"
  v-model="mainColor">
</el-color-picker>

import { changeThemeColor, curColor } from '@/utils/themeColorClient'
export default{
	data() {
  	return {
    	mainColor: curColor
    }
  },
  methods: {
  	changeColor(newColor) {
      changeThemeColor(newColor).then(() => {
        this.$message.success('主题色切换成功~')
      })
    }
  }
}