首先在页面找到您要修改的页面的选择器，之后在您的项目中js文件中进行搜索
例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
:root{
--bg--color:'#fff';
--a-color:'black';
}
a.navbar-brand, a.logo {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:var(--a-color);
font-size: 2rem;
font-weight: bold;
margin-top: 0; }
.header {
background:var(--bg-color);
min-height: 7em;
height: auto;
border-radius: 0;
width: 100%;
color: #444342;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.header li.nav-item {
font-size: 1.05em;
margin-left: .5em;
padding: .75em .35em; }
|
我们将颜色用变量控制
通过变量控制
1
2
3
4
5
|
# 声明变量
:root{
--bg--color:'#fff';
--a-color:'black';
}
|
使用变量
1
2
|
// 变量用法
color:var(--a-color);
|
写方法控制背景和字体颜色
1 需要个开关按钮
1
|
<h-switch v-model="colors" @change="change_back">白/黑</h-switch>
|
注：利用双向绑定给其默认值
1
2
3
4
5
|
data(){
return{
colors:0, // 默认代表白色
}
}
|
2 创建change_back方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
change_back:function(){
// 获取样式表
var styles = getComputedStyle(document.documentElement)
if (this.colors != 0 ){
// 给背景赋值
document.documentElement.style.setProperty('--bg-color',"#292a2b")
// 设置字体颜色
document.documentElement.style.setProperty('--a-color',"white")
}else{
// 给背景赋值
document.documentElement.style.setProperty('--bg-color',"#white")
// 设置字体颜色
document.documentElement.style.setProperty('--a-color',"#292a2b")
}
}
|
注：切换到暗黑主题时我们将字体改成白色
在指定时间运行代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 指定时间运行代码
runtime:function(){;
var data = new Date()
// 获取当前hours
var time = data.getHours()
if(time == 22){
// 获取样式表
var styles = getComputedStyle(document.documentElement)
// 给背景赋值
document.documentElement.style.setProperty('--bg-color',"#292a2b")
// 设置字体颜色
document.documentElement.style.setProperty('--a-color',"white")
this.$Message("夜深了 您以进入暗黑模式")
}
}
|
到22:00的时候切换到自动切换到暗黑模式，在钩子方法调用这个方法
