后台系统切换主题颜色(换肤) Vue+ elementUi_后台主题色彩

---

前言

不断学习demo中，有好的demo会记录下来（主要怕自己也会忘记不想去踩坑）大家可以关注一下

提示：项目中要用到主题色切换所以记录一下，看了很多博主的，借鉴（抄袭一下）某位博主不记得是哪位大佬的了，艾特不到他，望大佬看到后私信，必记录出处！感谢。
提示：不啰嗦，正文！

一、css-color-function

Tab Atkins在 CSS 中提出的颜色函数的解析器和转换器。

二、使用步骤

1.下载依赖项。

npm install -g css-color-function
// 版本的话我用的是   "css-color-function": "^1.3.3",
1
2

2.引入

import color from 'css-color-function' 
1

3.使用（定义data数据）

定义data数据

	data() {
		return {
			originalStylesheetCount: -1, // 记录当前已引入style数量
			originalStyle: '', // 获取拿到的.css的字符串
			colors: {
			// 颜色选择器默认颜色值,这个值要和element-variables一样
				primary: '#409EFF',
			},
			cssUrl: [
				'//unpkg.com/element-ui/lib/theme-chalk/index.css',  //unpkg element 包
				'./static/css/index.css', 
			],
		}
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.定义方法

		colorChange(e) {
			if (!e) return
			localStorage.setItem('color', e)
			this.colors = {
				primary: color.convert('color(' + this.colors.primary + ')'),
				'light-1': color.convert(
					'color(' + this.colors.primary + ' tint(90%))'
				),
				'light-2': color.convert(
					'color(' + this.colors.primary + ' tint(80%))'
				),
				'light-3': color.convert(
					'color(' + this.colors.primary + ' tint(70%))'
				),
				'light-4': color.convert(
					'color(' + this.colors.primary + ' tint(60%))'
				),
				'light-5': color.convert(
					'color(' + this.colors.primary + ' tint(50%))'
				),
				'light-6': color.convert(
					'color(' + this.colors.primary + ' tint(40%))'
				),
				'light-7': color.convert(
					'color(' + this.colors.primary + ' tint(30%))'
				),
				'light-8': color.convert(
					'color(' + this.colors.primary + ' tint(20%))'
				),
				'light-9': color.convert(
					'color(' + this.colors.primary + ' tint(10%))'
				),
			}
			this.writeNewStyle()
		},
		writeNewStyle() {
			let cssText = this.originalStyle
			Object.keys(this.colors).forEach((key) => {
				cssText = cssText.replace(
					new RegExp('(:|\\s+)' + key, 'g'),
					'$1' + this.colors[key]
				)
			})
			if (this.originalStylesheetCount === document.styleSheets.length) {
				// 如果之前没有插入就插入
				const style = document.createElement('style')
				style.innerText = cssText
				document.head.appendChild(style)
			} else {
				document.head.lastChild.innerText = cssText
			}
		},
		getIndexStyle(url) {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let that = this
			var request = new XMLHttpRequest()
			request.open('GET', url)
			request.onreadystatechange = function () {
				if (
					request.readyState === 4 &&
					(request.status === 200 || request.status === 304)
				) {
					// 调用本地的如果拿不到会得到html,html是不行的
					if (
						request.response &&
						!/DOCTYPE/gi.test(request.response)
					) {
						that.originalStyle = that.getStyleTemplate(
							request.response
						)
						that.writeNewStyle()
					} else {
						// 本地
						that.originalStyle = ''
					}
				} else {
					that.originalStyle = ''
				}
			}
			request.send(null)
		},
		getStyleTemplate(data) {
			const colorMap = {
				'#3a8ee6': 'shade-1',
				'#409eff': 'primary',
				'#53a8ff': 'light-1',
				'#66b1ff': 'light-2',
				'#79bbff': 'light-3',
				'#8cc5ff': 'light-4',
				'#a0cfff': 'light-5',
				'#b3d8ff': 'light-6',
				'#c6e2ff': 'light-7',
				'#d9ecff': 'light-8',
				'#ecf5ff': 'light-9',
			}
			Object.keys(colorMap).forEach((key) => {
				const value = colorMap[key]
				data = data.replace(new RegExp(key, 'ig'), value)
			})
			return data
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

4.调用方法使用

	mounted() {
		// 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
		// eslint-disable-next-line @typescript-eslint/no-this-alias
		let that = this
		// 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
		this.colors.primary =
			localStorage.getItem('color') || this.colors.primary
		this.getIndexStyle(this.cssUrl[0])
		setTimeout(function () {
			if (that.originalStyle) {
                // 
			} else {
				that.getIndexStyle(that.cssUrl[1])
			}
		}, 2000)
		this.$nextTick(() => {
			// 获取页面一共引入了多少个style 文件
			this.originalStylesheetCount = document.styleSheets.length
		})
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5.模板

<template>
	<div>
		<el-color-picker
			@change="colorChange"
			v-model="colors.primary"
		></el-color-picker>
        <el-button type="primary"> awdawdas</el-button>
	</div>
</template>
1
2
3
4
5
6
7
8
9

---

6、AllCode

<template>
	<div>
		<el-color-picker
			@change="colorChange"
			v-model="colors.primary"
		></el-color-picker>
        <el-button type="primary"> awdawdas</el-button>
	</div>
</template>
<script>
import color from 'css-color-function' // npm install -g css-color-function
export default {
    name:'Lor',
	data() {
		return {
			originalStylesheetCount: -1, // 记录当前已引入style数量
			originalStyle: '', // 获取拿到的.css的字符串
			colors: {
				// 颜色选择器默认颜色值,这个值要和element-variables一样
				primary: '#409EFF',
			},
			cssUrl: [
				'//unpkg.com/element-ui/lib/theme-chalk/index.css',  //unpkg element 包
				'./static/css/index.css', 
			],
		}
	},
	methods: {
		colorChange(e) {
			if (!e) return
			localStorage.setItem('color', e)
			this.colors = {
				primary: color.convert('color(' + this.colors.primary + ')'),
				'light-1': color.convert(
					'color(' + this.colors.primary + ' tint(90%))'
				),
				'light-2': color.convert(
					'color(' + this.colors.primary + ' tint(80%))'
				),
				'light-3': color.convert(
					'color(' + this.colors.primary + ' tint(70%))'
				),
				'light-4': color.convert(
					'color(' + this.colors.primary + ' tint(60%))'
				),
				'light-5': color.convert(
					'color(' + this.colors.primary + ' tint(50%))'
				),
				'light-6': color.convert(
					'color(' + this.colors.primary + ' tint(40%))'
				),
				'light-7': color.convert(
					'color(' + this.colors.primary + ' tint(30%))'
				),
				'light-8': color.convert(
					'color(' + this.colors.primary + ' tint(20%))'
				),
				'light-9': color.convert(
					'color(' + this.colors.primary + ' tint(10%))'
				),
			}
			this.writeNewStyle()
		},
		writeNewStyle() {
			let cssText = this.originalStyle
			Object.keys(this.colors).forEach((key) => {
				cssText = cssText.replace(
					new RegExp('(:|\\s+)' + key, 'g'),
					'$1' + this.colors[key]
				)
			})
			if (this.originalStylesheetCount === document.styleSheets.length) {
				// 如果之前没有插入就插入
				const style = document.createElement('style')
				style.innerText = cssText
				document.head.appendChild(style)
			} else {
				document.head.lastChild.innerText = cssText
			}
		},
		getIndexStyle(url) {
			// eslint-disable-next-line @typescript-eslint/no-this-alias
			let that = this
			var request = new XMLHttpRequest()
			request.open('GET', url)
			request.onreadystatechange = function () {
				if (
					request.readyState === 4 &&
					(request.status === 200 || request.status === 304)
				) {
					// 调用本地的如果拿不到会得到html,html是不行的
					if (
						request.response &&
						!/DOCTYPE/gi.test(request.response)
					) {
						that.originalStyle = that.getStyleTemplate(
							request.response
						)
						that.writeNewStyle()
					} else {
						// 本地
						that.originalStyle = ''
					}
				} else {
					that.originalStyle = ''
				}
			}
			request.send(null)
		},
		getStyleTemplate(data) {
			const colorMap = {
				'#3a8ee6': 'shade-1',
				'#409eff': 'primary',
				'#53a8ff': 'light-1',
				'#66b1ff': 'light-2',
				'#79bbff': 'light-3',
				'#8cc5ff': 'light-4',
				'#a0cfff': 'light-5',
				'#b3d8ff': 'light-6',
				'#c6e2ff': 'light-7',
				'#d9ecff': 'light-8',
				'#ecf5ff': 'light-9',
			}
			Object.keys(colorMap).forEach((key) => {
				const value = colorMap[key]
				data = data.replace(new RegExp(key, 'ig'), value)
			})
			return data
		},
	},
	mounted() {
		// 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
		// eslint-disable-next-line @typescript-eslint/no-this-alias
		let that = this
		// 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
		this.colors.primary =
			localStorage.getItem('color') || this.colors.primary
		this.getIndexStyle(this.cssUrl[0])
		setTimeout(function () {
			if (that.originalStyle) {
                // 
			} else {
				that.getIndexStyle(that.cssUrl[1])
			}
		}, 2000)
		this.$nextTick(() => {
			// 获取页面一共引入了多少个style 文件
			this.originalStylesheetCount = document.styleSheets.length
		})
	},
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

总结

不断学习demo中，有好的demo会记录下来（主要怕自己也会忘记不想去踩坑）大家可以关注一下