1. :root 选择器
2. .setProperty属性
??首先创建一个 .scss 文件(其实用 .css 文件也是可以的)
// --color 相当于全局定义的一个css变量
// var(--color) 用于引用
// 在页面样式的引用中，你将会看到
:root {
--color: rgb(79, 67, 253);
--bck: rgb(196, 192, 255);
}
并在 main.js中引入
import ‘@/assets/css/index.scss‘
?? （ 完整页面代码，直接往下翻 ~~~~~ ）
??引用全局配置的 css 变量
let root = document.querySelector(":root");
root.style.setProperty("--color", "rgb(253, 44, 79)");
root.style.setProperty("--bck", "rgb(255, 192, 203)");
??????注意：
:root 只能在全局上使用，下面的这种写法是不生效的(因为设置 scoped 后就不是全局样式了)，想要生效的话可以去除 scoped
<style lang="scss" scoped>
:root{
--sss:red;
}
.box{
background:var(--sss);
}
</style>
<template>
<div class="box">
<div class="change_tab">
<span @click="changeColor(1)">主题色1</span>
<span @click="changeColor(2)">主题色2</span>
<span @click="changeColor(3)">主题色3</span>
</div>
<h3>文字颜色</h3>
<div class="bck"></div>
</div>
</template>
<script>
export default {
methods: {
changeColor(num) {
let root = document.querySelector(":root");
if (num == 1) {
root.style.setProperty("--color", "rgb(253, 44, 79)");
root.style.setProperty("--bck", "rgb(255, 192, 203)");
} else if (num == 2) {
root.style.setProperty("--color", "rgb(253, 114, 0)");
root.style.setProperty("--bck", "rgb(253, 216, 186)");
} else if (num == 3) {
root.style.setProperty("--color", "rgb(79, 67, 253)");
root.style.setProperty("--bck", "rgb(196, 192, 255)");
}
}
}
};
</script>
<style lang="scss" scoped>
.box {
box-sizing: border-box;
padding: 50px;
.change_tab {
display: flex;
span {
margin-right: 20px;
color: #3d3d3d;
text-decoration: underline;
cursor: pointer;
}
}
h3 {
transition: 0.3s;
color: var(--color);
text-align: left;
margin: 20px 0;
}
.bck {
transition: 0.3s;
width: 100px;
height: 100px;
background: var(--bck);
}
}
</style>
上面讲的主要是应用于主题色的点击切换，如果想要在满足什么条件下，进入项目的时候直接改变颜色，那么就可以在 App.vue 里进行修改
(我这边是根据 sessionStorage 里面储存的 CHANNEL 类型判断的 )
mounted() {
let root = document.querySelector(":root");
if (sessionStorage.CHANNEL == "AXXXXXXXXX") {
root.style.setProperty("--color", "rgb(253, 44, 79)");
root.style.setProperty("--bck", "rgb(255, 192, 203)");
} else if (sessionStorage.CHANNEL == "ZMPH") {
root.style.setProperty("--color", "rgb(253, 114, 0)");
root.style.setProperty("--bck", "rgb(253, 216, 186)");
}
}
原文：https://www.cnblogs.com/love314159/p/13852101.html