使用css3原生变量实现主题换肤
变量的声明
声明变量的时候，变量名前面要加两根连词线（--）。
body {
--color:red;
--background-color:#545454;
}
:root {
/* :root伪类选择器表示文档根元素<html> */
--backgroundColor: #f0f0f0;
--color: #232323;
}
CSS 变量（CSS variable）又叫做“CSS 自定义属性"（CSS custom properties)，变量名大小写敏感，--header-color和--Header-Color是两个不同变量。
变量的使用
var()函数用于读取变量。
color: var(--color,#545454); // 第二个只为默认值
注意，变量值只能用作属性值，不能用作属性名。
变量值的类型
如果变量值是一个字符串，可以与其他字符串拼接。
--bar: 'hello';
--foo: var(--bar)' world';
如果变量值是数值，不能与数值单位直接连用。
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
如果变量值带有单位，就不能写成字符串。
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}
代码实现主题换肤
页面
<div class="header">header</div>
<button onclick="handleChange()">change theme</button>
样式
<style>
:root {
/* :root伪类选择器表示文档根元素<html> */
--backgroundColor: #f0f0f0;
--color: #232323;
}
.header {
background-color: var(--backgroundColor);
color: var(--color);
padding: 30px;
margin: 30px;
}
</style>
事件
通过js来动态设置css变量
<script>
document.body.style.setProperty('--backgroundColor', '#f0f0f0');
document.body.style.setProperty('--color', '#232323');
function handleChange() {
const color = document.body.style.getPropertyValue('--color').trim();
if (color === '#232323') {
document.body.style.setProperty('--backgroundColor', '#000');
document.body.style.setProperty('--color', '#fff');
} else {
document.body.style.setProperty('--backgroundColor', '#f0f0f0');
document.body.style.setProperty('--color', '#232323');
}
}
</script>
