1.先写css样式
1.在.css文件定义css变量颜色
body {
/* 军绿 */
--themeColor: #538000;
/* 淡军绿 */
--assColor: #e0f6d8;
/* 深蓝色 */
--darkBlue: #202e62;
/* 浅蓝色 */
--lightBlue: #e0e5f9;
}
2.在App.vue中引入css文件
@import "./styles/zd-main.css";
3.随便写个使用css变量颜色的代码
.projectHover {
background: var(--assColor);
color: var(--themeColor);
}
.down {
height: 30px;
line-height: 30px;
font-size: 14px;
color: var(--themeColor);
margin-left: 20px;
}
2.定义换肤方法
1.先在localStorage中存储一个变量
theme: localStorage.getItem("theme"),
2.定义换肤的方法
change() {
if (this.theme == null || this.theme == "green") {
document.body.style.setProperty("--themeColor", "#202e62");
document.body.style.setProperty("--assColor", "#e0e5f9");
3.存储一个主题色为blue的蓝色主题
localStorage.setItem("theme", "blue");
} else {
document.body.style.setProperty("--themeColor", "#538000");
document.body.style.setProperty("--assColor", "#e0f6d8");
4.存储一个主题色为green的绿色主题
localStorage.setItem("theme", "green");
}
5.页面重置
this.$router.go(0);
},
3.换肤有时候一些图片也要换掉的时候 或者导航栏。我们来实现切换底部导航栏的代码
1.在底部导航栏的页面data中写入
pop: localStorage.getItem("theme"),
获取到存储在浏览器中的变量
2.进行判断是否为null,默认颜色是绿色
if (this.pop == null) {
this.pop = "green";
}
3. 用v-if判断展示哪个导航栏
-----1. 先展示绿色的导航栏
<div class="tabbers" v-if="pop == 'green'">
<van-tabbar
v-model="active"
route
active-color="var(--themeColor)"
inactive-color="#999999"
@change="onChange"
>
<van-tabbar-item
v-for="(item, index) in tabber"
:key="index"
replace
:to="item.url"
>
<span>{{ item.name }}</span>
<template #icon="props">
<van-image
style="width: 23px; height: 18px"
:src="props.active ? item.active : item.icon"
/>
</template>
</van-tabbar-item>
</van-tabbar>
</div>
-----2. 切换蓝色的导航栏
<div class="tabbers" v-if="pop == 'blue'">
<van-tabbar
v-model="active"
route
active-color="var(--themeColor)"
inactive-color="#999999"
@change="onChange"
>
<van-tabbar-item
v-for="(item, index) in tab"
:key="index"
replace
:to="item.url"
>
<span>{{ item.name }}</span>
<template #icon="props">
<van-image
style="width: 23px; height: 18px"
:src="props.active ? item.active : item.icon"
/>
</template>
</van-tabbar-item>
</van-tabbar>
</div>