vue前端全局主题实现

在App.vue中配置

	:root {
	  /* 背景色 */
	  /* --theme_bg_color: #000; */
	  --theme_bg_color: #fff;
	  
	  //字体颜色
	  --theme-wz-color:#000;
	  /* --theme-wz-color:#fff; */
	  
	  //div盒子颜色
	  --theme-div-color:#181818;
	   /* --theme-div-color:#fff; */
	}

在子页面直接引用

	page{
		background: var(--theme_bg_color);//使用全局变量
	}
	.pageback{
		background: var(--theme_bg_color);
	}
	//设置字体样式，直接写在class里，例如class="box wxcolor"
	.wzcolor{
		color: var(--theme-wz-color);
	}
	//盒子样式
	.divitheme{
		background: var(--theme-div-color);
		border-radius: 10px;
		height: 128px;
	}

盒子效果