【背景需求】项目需支持用户自定义主题颜色并缓存颜色
【技术实现】（插件） vue@2.x、element-ui@2.x.x、css-color-function@1.3.3、object-assign@4.1.1
-------------- Test.vue ---------------
<template>
<div class="navbar">
<div class="right-menu">
<span class="logout-span" @click="showThemeDialog">{{ $t('navbar.theme') }}</span>
</div>
<el-dialog :visible.sync="themeDialogVisible" :title="$t('navbar.theme')" width="400px">
<el-form
:model="colors"
:rules="rules"
ref="form"
class="theme-form"
label-position="top"
label-width="70px"
>
<el-form-item label="主题色" prop="primary">
<el-color-picker v-model="colors.primary"></el-color-picker>
</el-form-item>
<el-form-item class="color-buttons">
<el-button type="primary" @click="submitForm">切换</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import generateColors from "@/utils/color";
import objectAssign from "object-assign";
const defaultColor = '#409eff'
export default {
components: {
Breadcrumb,
Hamburger,
ErrorLog,
SizeSelect
},
data() {
const colorValidator = (rule, value, callback) => {
if (!value) {
return callback(new Error("主题色不能为空"));
} else if (!/^#[\dabcdef]{6}$/i.test(value)) {
return callback(new Error("请输入 hex 格式的主题色"));
} else {
callback();
}
};
return {
colors: {
primary: defaultColor
},
rules: {
primary: [{ validator: colorValidator, trigger: "blur" }]
},
localColor:'',
originalStylesheetCount: -1,
originalStyle: "",
themeDialogVisible: false
};
},
created() {
this.getIndexStyle();
this.localColor = localStorage.getItem('color')
},
mounted() {
this.$nextTick(() => {
this.originalStylesheetCount = document.styleSheets.length
this.colors.primary = this.localColor ? this.localColor : defaultColor
this.initColor()
});
},
computed: {
...mapGetters(["sidebar", "name", "avatar", "device"])
},
methods: {
toggleSideBar() {
this.$store.dispatch("toggleSideBar");
},
logout() {
this.$store.dispatch("LogOut").then(() => {
location.reload(); // In order to re-instantiate the vue-router object to avoid bugs
});
},
showThemeDialog() {
this.themeDialogVisible = true;
},
writeNewStyle() {
document.getElementsByTagName('body')[0].style.setProperty('--color-primary', this.colors.primary);
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;
}
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.themeDialogVisible = false;
this.colors = objectAssign(
{},
this.colors,
generateColors(this.colors.primary)
);
this.writeNewStyle();
localStorage.setItem('color', this.colors.primary)
} else {
return false;
}
});
},
getIndexStyle() {
this.getFile("//unpkg.com/element-ui/lib/theme-chalk/index.css").then(
({ data }) => {
this.originalStyle = this.getStyleTemplate(data);
}
);
},
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;
},
getFile (url, isBlob = false) {
return new Promise((resolve, reject) => {
const client = new XMLHttpRequest()
client.responseType = isBlob ? 'blob' : ''
client.onreadystatechange = () => {
if (client.readyState !== 4) {
return
}
if (client.status === 200) {
const urlArr = client.responseURL.split('/')
resolve({
data: client.response,
url: urlArr[urlArr.length - 1]
})
} else {
reject(new Error(client.statusText))
}
}
client.open('GET', url)
client.send()
})
},
resetForm() {
// this.$refs.form.resetFields();
this.colors.primary = defaultColor
},
initColor(){
this.colors = objectAssign(
{},
this.colors,
generateColors(this.colors.primary)
);
this.writeNewStyle();
}
}
};
</script>
-------------- @/utils/color.js ---------------
import color from 'css-color-function'
import formula from './formula.json'
const generateColors = primary => {
let colors = {}
Object.keys(formula).forEach(key => {
const value = formula[key].replace(/primary/g, primary)
colors[key] = color.convert(value)
})
return colors
}
export default generateColors
-------------- ./formula.json -----------
{
"shade-1": "color(primary shade(10%))",
"light-1": "color(primary tint(10%))",
"light-2": "color(primary tint(20%))",
"light-3": "color(primary tint(30%))",
"light-4": "color(primary tint(40%))",
"light-5": "color(primary tint(50%))",
"light-6": "color(primary tint(60%))",
"light-7": "color(primary tint(70%))",
"light-8": "color(primary tint(80%))",
"light-9": "color(primary tint(90%))"
}
--------------- 换主题色代码结束线 --------------
【备注】 以上会改变element-ui涉及到的元素的主题颜色，如果有一些元素是个人在页面新建的，比如某些文字、自定义按钮需要动态变色的话，需要以下技术实现：
在index.scss里 写入以下代码 ：
:root {
--color-primary: #409eff; //--color-primary ：全局主题色变量
}
$varColor: var(--color-primary); //用var盛放颜色变量，供于js里改变此变量使用
在改变颜色的function里改变颜色变量值：
document.getElementsByTagName('body')[0].style.setProperty('--color-primary', this.colors.primary); //(上面的Test.vue已包含此句)
