网页切换白天黑夜模式，其实就是对一个变量进操作，举个栗子: 默认值是false, 进行判断，如果是false的话那么指定元素的颜色为白天的颜色，如果为true那么指定元素的颜色为黑夜的颜色。
那么为了方便理解，下面就上代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| :root{
--bg-color:white;
--title-color: black;
}
a.navbar-brand, a.logo {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--title-color) !important;
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); }
|
这是在我的css文件中的代码，可以看到，我定义了两个变量: –bg-color, –title-color，分别在background和color这两个地方用到了它们。那么到这里只是定义了变量并给变量赋值(定义变量时 : 后面的值即为赋给变量的值)，接下来是在js中改变值了，不过为了方便理解我先放上我的html代码:
1
| <h-switch v-model="color_model" @change="change_background">{{$t('m.day')}}/{{$t('m.night')}}</h-switch>
|
这里使用的是vue.js和heyui的 h-swith标签，效果是这样:
, 当打开时(即按钮空白处为绿色时)返回true，再次点击按钮空白处重新变为白色，返回false。@change的意思是当发生改变时调用方法。
这是我在data(再次说明我使用的是vue.js)中设置的变量:
1
2
3
4
5
| data(){
return {
color_model: false
}
}
|
那么接下来是用js改变css的变量的值:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
change_background:function(){
console.log(this.color_model)
if(this.color_model){
var styles = getComputedStyle(document.documentElement);
document.documentElement.style.setProperty('--bg-color', '#292a2d');
document.documentElement.style.setProperty('--title-color', 'black');
}else{
getComputedStyle(document.documentElement);
document.documentElement.style.setProperty('--bg-color', 'white');
document.documentElement.style.setProperty('--title-color', 'black');
}
}
|
这样就可以实现在点击时改变变量的值了，即可以实现切换白天黑夜模式了。
那么除了这种手动切换白天黑夜的方法，还有一种自动检测当前时间选择白天模式或是黑夜模式的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
change_bg_by_time:function(){
let date = new Date();
let hour = date.getHours();
if(hour>6 && hour<18){
this.color_model = false
}
else{
this.color_model = true
}
},
|
由于我使用的是vue.js，所以直接在钩子方法mounted中调用了该函数以达到自动切换的目的。我的页面上是手动切换与自动切换共存的，所以不需要全部抄下来，根据需要使用即可。
那么本次就到这里了~
