暗夜模式配置

: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; }

# 声明变量
:root{
  --bg--color:‘#fff‘;
  --a-color:‘black‘;
}

// 变量用法
color:var(--a-color);

<h-switch v-model="colors" @change="change_back">白/黑</h-switch>

data(){
        return{
			colors:0, // 默认代表白色
        }
    }

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")
		}
	}

// 指定时间运行代码
		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("夜深了 您以进入暗黑模式")
			}
		}