Vue<主题色修改>
2020-02-26 本文已影响0人
誰在花里胡哨
效果图:

此篇文章是基于vue项目上进行修改的,在其他项目中也是可以实现这种效果的。
知识点:
1. :root 选择器
2. .setProperty属性
🎈首先创建一个 .scss 文件(其实用 .css 文件也是可以的)

index.scss 代码
// --color 相当于全局定义的一个css变量
// var(--color) 用于引用
// 在页面样式的引用中,你将会看到
:root {
--color: rgb(79, 67, 253);
--bck: rgb(196, 192, 255);
}
并在 main.js中引入
import '@/assets/css/index.scss'
⚓⚓ ( 完整页面代码,直接往下翻 ~~~~~ )
🎈引用全局配置的 css 变量

然后 document 获取到 :root,通过 .setProperty 直接修改定义的 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)");
}
}