暗夜模式配置

Posted anle123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了暗夜模式配置相关的知识，希望对你有一定的参考价值。

首先在页面找到您要修改的页面的选择器，之后在您的项目中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的时候切换到自动切换到暗黑模式，在钩子方法调用这个方法

以上是关于暗夜模式配置的主要内容，如果未能解决你的问题，请参考以下文章