改变element全局样式的颜色-使用theme-chalk工具
闻人思聪
- public/index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="time" content="<%= htmlWebpackPlugin.options.createDate %>">
<!-- 关闭dege浏览器自动识别电话 -->
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kindeditor@4.1.10/themes/default/default.css">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://cdn.jsdelivr.net/npm/kindeditor@4.1.10/kindeditor-all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<!-- <script src="https://daybrush.com/moveable/release/latest/dist/moveable.min.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/better-scroll@2.4.2/dist/better-scroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/benz-amr-recorder@1.1.3/BenzAMRRecorder.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js" > </script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
</head>
主要是这个
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css"> -
组件
-
<my-color-picker /> 使用 -
内容
import { log } from 'util';
<template>
<div class="">
<el-color-picker @change="userChangeColor" class="user-color-picker" :predefine="predefineArr" v-model="theme"></el-color-picker>
</div>
</template>
<script>
const ORIGINAL_THEME = '#409EFF'
export default {
components: {
},
data () {
return {
chalk: '',
theme: ORIGINAL_THEME,
predefineArr: ['#409EFF', '#00629B', '#64CCC9', '#E4002B', '#000'],
version: '2.12.0'
}
},
created () {
this.theme = localStorage.getItem('COLOR_THEME') ? localStorage.getItem('COLOR_THEME') : '#409EFF'
const themeRefresh = this.getThemeCluster(this.theme.replace('#', ''))
this.$store.dispatch('theme/setThemeColor', themeRefresh)
},
watch: {
theme (val, oldVal) {
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
// console.log(themeCluster)
// console.log(originalCluster)
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
}
const chalkHandler = getHandler('chalk', 'chalk-style')
if (!this.chalk) {
debugger
const url = `https://unpkg.com/element-ui@${this.version}/lib/theme-chalk/index.css`
this.getCSSString(url, chalkHandler, 'chalk')
} else {
debugger
chalkHandler()
}
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
// 响应外部操作
this.$emit('onThemeChange', val)
this.$store.dispatch('theme/setThemeColor', themeCluster)
if (this.showSuccess) {
// this.$message({
// message: '换肤成功',
// type: 'success'
// })
} else {
this.showSuccess = true
}
}
},
methods: {
userChangeColor (color) {
if (color) {
this.theme = color
return
}
this.theme = ORIGINAL_THEME
},
updateStyle (style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
},
getCSSString (url, callback, variable) {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
callback()
}
}
xhr.open('GET', url)
xhr.send()
},
getThemeCluster (theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) {
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
}
}
</script>
<style lang="scss" scoped>
.user-color-picker {
padding-top:3px;
margin-right: 35px;
}
/deep/ .el-color-picker__trigger {
// height: 25px !important;
// width: 25px !important;
}
</style>
- 暂时没有用到 – 可以替换主色调以及透明度
vuex
import Cookies from 'js-cookie'
const state = {
witTheme: {
$witPrimary: '#409EFF',
$witOpacity1: '#53a8ff',
$witOpacity2: '#66b1ff',
$witOpacity3: '#79bbff',
$witOpacity4: '#8cc5ff',
$witOpacity5: '#a0cfff',
$witOpacity6: '#b3d8ff',
$witOpacity7: '#c6e2ff',
$witOpacity8: '#d9ecff',
$witOpacity9: '#ecf5ff',
}
}
const mutations = {
SET_THEME: (state, color) => {
let colorArr = {
$witPrimary: `#${color[0]}`,
$witOpacity1: color[2],
$witOpacity2: color[3],
$witOpacity3: color[4],
$witOpacity4: color[5],
$witOpacity5: color[6],
$witOpacity6: color[7],
$witOpacity7: color[8],
$witOpacity8: color[9],
$witOpacity9: color[10]
}
state.theme = colorArr
console.log(colorArr)
localStorage.setItem('COLOR_WitTHEME', color)
},
}
const actions = {
setThemeColor({ commit, state }, color) {
console.log('xxxxxxxxxxxxxxxx')
console.log(color)
commit('SET_THEME', color)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
一些注意点
- element-ui是cdn引入，vue也必须是cdn引入，而且vue的引入必须在element-ui之前，因为element-ui是基于vue书写的。
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
}
}
}
可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试
类似资料：