关于使用css变量实现主题的切换效果
现在要实现网页主题的切换成本较小的一种方案就是使用css的变量来实现
HTML
在HTML的body标签上先定义一个id元素属性
<body id="sm-theme">
<sj-root></sj-root>
</body>CSS
css定义css变量,变量的定义必须要以 -- 开头
#sm-theme {
--smTheme: #2A2A2A;
--smSettingRight: #484848;
--smSettingRightBox: #2A2A2A;
}js
在任何地方使用js/ts来获取body上定义的sm-theme属性名从而操作定义在里面的css样式变量
changeTheme(colorName) {
const theamEle = document.getElementById('sm-theme'); // 获取id为sm-theme的元素
theamEle.style.setProperty('--smTheme', colorName); // 设置--smTheme变量为我们想要的颜色
const theamColor = getComputedStyle(theamEle).getPropertyValue('--smTheme'); // 获取--smTheme变量的颜色
if (theamColor === '#2A2A2A') {
theamEle.style.setProperty('--smSettingRight', '#484848');
theamEle.style.setProperty('--smSettingRightBox', '#2A2A2A');
} else {
theamEle.style.setProperty('--smSettingRight', 'rgba(180,180,180,0.4)');
theamEle.style.setProperty('--smSettingRightBox', '#5C5C5C');
} 相关推荐
nicepainkiller 2020-07-24
lanzhusiyu 2020-07-19
firefaith 2020-10-30
Erick 2020-11-17
xuebingnan 2020-11-05
Android开发CXY 2020-11-11
拉斯厄尔高福 2020-11-04
小飞侠V 2020-11-02
yutian0 2020-10-26
牧 2020-10-22
佐杰 2020-10-22
文山羊 2020-10-20
积少成多 2020-10-21
yuwinter 2020-10-14
Mars的自语 2020-09-27
Radar 2020-09-26
楼上小宇home 2020-09-26
Mynamezhuang 2020-09-18
归去来兮 2020-09-18