前端实现一键换肤动态切换主题

问题描述：

在某个项目中，要求实现打开颜色选择器组件，选中某个颜色，项目的整体风格颜色变为该颜色 (比如按钮，输入框，侧边栏选中框等等)，也就是常说的一键换肤

---

问题分析：

传统换肤是写几套css样式文件，然后改变css路径名引入不同样式
或者通过class不同+嵌套选择器的形式来控制
缺点：工作量大且重复，能改变的主题风格少

---

解决方案：

CSS变量（CSS Variables），也称为自定义属性（Custom
Properties），是一种在CSS中定义和使用的可重用值。它们以–开头，后面跟着变量名，可以在整个样式表中使用。

CSS变量的定义和使用如下所示：

定义变量：

css

:root {
    
    
  --primary-color: #ff0000;
}

使用变量：

css

.element {
    
    
  color: var(--primary-color);
}

在上述示例中，我们在:root伪类中定义了一个名为–primary-color的变量，并将其值设置为#ff0000。然后，在.element选择器中使用var()函数引用了这个变量，作为color属性的值。这样，.element元素的文字颜色将会是#ff0000。

CSS变量具有以下特点：

可以在任何CSS规则中使用，包括选择器、伪类和媒体查询。 可以在定义变量时使用其他变量，实现变量之间的关联。
可以在JavaScript中使用getComputedStyle()和setProperty()等方法动态修改变量的值。
可以通过CSS预处理器（如Sass、Less）来使用和处理变量。
CSS变量的引入使得样式表的维护更加灵活和可重用，可以更方便地实现主题切换、响应式布局等需求。

简单写个小案例

<template>
	<div class="header" :style="{'--bgcolor': bgColor }">
		<div class="bg" @click="changeBg">改变颜色</div>
		<input class="btn" value="按钮" type="button" />
		<div class="box">盒子</div>
	</div>	
</template>

<script>
export default {
    
    
  name: "Home",
  data(){
    
    
	 return{
    
    
		 bgColor:'green'
	 } 
  },
  methods:{
    
    
	 changeBg(){
    
    
		this.bgColor = 'red' 
	 }
  },
}
</script>

<style lang="scss" scoped>
	.header{
    
    
		height: 300px;
		color: #fff;
		font-size: 50px;
		.bg{
    
    
		   background-color: var(--bgcolor);	
		}
		.btn{
    
    
			background-color: var(--bgcolor);
		}
		.box{
    
    
			border: 1px solid var(--bgcolor);
		}
	}
</style>

实际项目可以利用vuex或者本地缓存来实现一键换肤动态切换主题功能。