换肤功能实现过程

css3的自定义属性

	:root{
		--primary-color:#009688;
		--light:#fff;
		--dark:#000;
	}

自定义属性：–primary-color、–light、–dark
自定义属性的命名规则：
–variables-name:variables-value
–属性名：属性值
设置作用域：
:root 作用于全局
:root{–theme-color:red;}
#app{–theme-color:red;}//作用于id为app的节点内
使用自定义属性：

	//全局定义该属性
	:root{ --theme-color:red;}
	//使用该属性
	#app{
		background-color:var(--theme-color);
	}
	//假如没有指定--theme-color这个属性，可以在使用的时候加上替代值
	#app{
	//当没有指定--theme-color属性值，则会为background-color设置black值
		background-color:var(--theme-color,black);
	}

如何通过js获取和设置自定义属性

获取自定义属性值

	//在js中获取--theme-color的值
	var styles = getComputedStyle(document.documentElement)
	var value = styles.getPropertyValue("--theme-color");

更改自定义属性值

	document.dcumentElement.style.setProperty("--theme-color","black")

js使用getComputedStyle()方法获取指定元素的css样式

https://download.csdn.net/download/weixin_37480339/13979840
上面链接是一个小demo，已实现切换主题功能，效果如下：，可以点击不同按钮切换背景色