关于使用css变量实现主题的切换效果

佚名 6年前 (2020-01-17) 随笔 781人围观抢沙发百度已收录

现在要实现网页主题的切换成本较小的一种方案就是使用css的变量来实现

HTML

在HTML的body标签上先定义一个id元素属性

<body id="sm-theme">
    <sj-root></sj-root>
</body>

CSS

css定义css变量,变量的定义必须要以 -- 开头

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

#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');
    }