|
|
|
|
@ -80,6 +80,7 @@ export default {
|
|
|
|
|
this.$emit('change', val)
|
|
|
|
|
Cookies.set('defaultTheme', val)
|
|
|
|
|
document.body.style.setProperty('--theme-color', val)
|
|
|
|
|
this.handleIViewTheme()
|
|
|
|
|
index++
|
|
|
|
|
$message?.close()
|
|
|
|
|
}
|
|
|
|
|
@ -159,6 +160,87 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
clusters.push(shadeColor(theme, 0.1))
|
|
|
|
|
return clusters
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
handleIViewTheme() {
|
|
|
|
|
const styleSheets = document.styleSheets;
|
|
|
|
|
const lightColor = this.colorUtils(this.theme, 0.2)
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < styleSheets.length; i++) {
|
|
|
|
|
const styleSheet = styleSheets[i];
|
|
|
|
|
try {
|
|
|
|
|
// 获取样式表中的所有规则
|
|
|
|
|
const rules = styleSheet.cssRules || styleSheet.rules;
|
|
|
|
|
|
|
|
|
|
// 遍历每个规则
|
|
|
|
|
for (let j = 0; j < rules.length; j++) {
|
|
|
|
|
const rule = rules[j];
|
|
|
|
|
|
|
|
|
|
// 检查规则是否是 .ivu-btn-primary
|
|
|
|
|
if(rule.selectorText === '.ivu-btn-ghost.ivu-btn-primary') {
|
|
|
|
|
rule.style.color = this.theme;
|
|
|
|
|
}
|
|
|
|
|
else if (rule.selectorText === '.ivu-btn-ghost.ivu-btn-primary:hover') {
|
|
|
|
|
rule.style.color = lightColor;
|
|
|
|
|
}
|
|
|
|
|
else if(rule.selectorText === '.ivu-page-item-active') {
|
|
|
|
|
rule.style.borderColor = this.theme;
|
|
|
|
|
}
|
|
|
|
|
else if (/^.ivu-.*?-primary$|^.ivu-input-search$/.test(rule.selectorText)) {
|
|
|
|
|
// 修改 color 属性
|
|
|
|
|
rule.style.borderColor = this.theme; // 替换为你想要的颜色
|
|
|
|
|
rule.style.backgroundColor = this.theme;
|
|
|
|
|
} else if(/^.ivu-.*?-primary(:hover|:focus)$|^.ivu-input-search(:hover|:active)$/.test(rule.selectorText)) {
|
|
|
|
|
rule.style.borderColor = lightColor; // 替换为你想要的颜色
|
|
|
|
|
rule.style.backgroundColor = lightColor;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
// 某些样式表可能无法访问（例如跨域样式表），需要捕获异常
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
colorUtils(color, level) {
|
|
|
|
|
function hex2Rgb(str) {
|
|
|
|
|
var r = /^#?[0-9a-fA-F]{6}$/;
|
|
|
|
|
//test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
|
|
|
|
|
if (!r.test(str)) {
|
|
|
|
|
console.log("输入错误的hex")
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
//replace替换查找的到的字符串
|
|
|
|
|
str = str.replace("#", "");
|
|
|
|
|
//match得到查询数组
|
|
|
|
|
var hxs = str.match(/../g);
|
|
|
|
|
for (var i = 0; i < 3; i++) {
|
|
|
|
|
hxs[i] = parseInt(hxs[i], 16);
|
|
|
|
|
}
|
|
|
|
|
return hxs;
|
|
|
|
|
}
|
|
|
|
|
function rgb2Hex(a, b, c) {
|
|
|
|
|
var r = /^\d{1,3}$/;
|
|
|
|
|
if (!r.test(a) || !r.test(b) || !r.test(c)) {
|
|
|
|
|
console.log("输入错误的rgb颜色值")
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
var hexs = [a.toString(16), b.toString(16), c.toString(16)];
|
|
|
|
|
for (var i = 0; i < 3; i++) {
|
|
|
|
|
if (hexs[i].length === 1) hexs[i] = "0" + hexs[i];
|
|
|
|
|
}
|
|
|
|
|
return "#" + hexs.join("");
|
|
|
|
|
}
|
|
|
|
|
var r = /^#?[0-9a-fA-F]{6}$/;
|
|
|
|
|
if (!r.test(color)) {
|
|
|
|
|
console.log("输入错误的hex颜色值")
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
var rgbc = hex2Rgb(color);
|
|
|
|
|
for (var i = 0; i < 3; i++){
|
|
|
|
|
rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
|
|
|
|
|
}
|
|
|
|
|
return rgb2Hex(rgbc[0], rgbc[1], rgbc[2]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -179,4 +261,7 @@ export default {
|
|
|
|
|
.theme-picker-dropdown .el-color-dropdown__link-btn {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
:root {
|
|
|
|
|
--theme-color: #409EFF;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
