主题CSS变量的使用遵循W3C规范,主题默认提供了色彩变量。使用时候仅使用即可。
例,现有HTML代码如下:
<span class="sample">
文本示例
</span>
需要:
将颜色修改为“主色调”、并添加1像素的“灰度7”作为边框,原则上我们这样写:
.sample {
color: #20A0FF; //主色调
border: 1px solid #D8E0EA; //边框
}
若修改为使用主题的色彩变量,根据上一节我们的变量名,应该写为:
.sample {
color: var(--primary_default);
border: 1px solid var(--gray_7);
}
由于IE系列及较旧的浏览器不支持CSS色彩变量,如果直接写为上面的效果将导致无法正常显示,因此需要使用无变量的写法来作为回退机制:
.sample {
color: #20A0FF;
color: var(--primary_default);
border: 1px solid #D8E0EA;
border: 1px solid var(--gray_7);
}
这样,既支持变量,又支持旧版浏览器回退的CSS代码就完成了。在主题后台修改主色调后,这个HTML中的文本颜色也会跟着主色调自动修改。