CSS变量实现主题切换的方法

CSS 变量

基本用法

声明一个变量,属性名需要以两个减号(--)开始,属性值则可以是任何有效的CSS值。

element {
  --main-bg-color: brown;
}

选择器是指定变量的可见作用域,该变量仅用于匹配当前选择器及其子孙,通常的最佳实践是定义在根伪类 :root 下,这样就可以在HTML文档的任何地方访问到它了。

:root {
  --main-bg-color: brown;
}

使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值:

element {
  background-color: var(--main-bg-color);
}

备用值

用 var() 函数可以定义多个备用值(fallback value),当给定值未定义时将会用备用值替换

备用值并不是用于实现浏览器兼容性的。如果浏览器不支持CSS自定义属性,备用值也没什么用

color: var(--my-var, red);
background-color: var(--my-var, var(--my-background, pink));

有效性

传统的CSS概念里,有效性和属性是绑定的,这对变量来说并不适用。当变量被解析,浏览器不知道它们什么时候会被使用,所以必须认为这些值都是有效的。
即便这些值是有效的,但当通过 var() 函数调用时,它在特定上下文环境下也可能不会奏效。属性和自定义变量会导致无效的CSS语句,这引入了一个新的概念:计算时有效性。

<p>This paragraph is initial black.</p> 
:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }

浏览器将 --text-color 的值替换给了 var(--text-color),但是 16px 并不是 color 的合法属性值。代换之后,该属性不会产生任何作用。浏览器会执行如下两个步骤:

  • 检查属性 color 是否为继承属性。是,但是 <p> 没有任何父元素定义了 color 属性。转到下一步。
  • 将该值设置为它的默认初始值,black。

当CSS属性-值对中存在语法错误,该行则会被忽略。然而如果自定义属性(变量)的值无效,它并不会被忽略,从而会导致该值被覆盖为默认值。

JavaScript 中的值

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var"); //  MDN上给的,但获取一直是空的,其他两个倒是没问题

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

主题切换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      :root {
        --bg: #000;
        --fontSize: 25px;
      }
      .pink-theme {
        --bg: hotpink;
      }
      body {
        transition: background 1s;
        background: var(--bg);
      }
      button {
        position: fixed;
        top: 50%;
        left: 50%;
        transition: color 1s;
        transform: translate(-50%, -50%);
        padding: 20px;
        border: none;
        background: #fff;
        font-size: var(--fontSize);
        color: var(--bg);
      }
    </style>
  </head>
  <body>
    <button>点击切换</button>
    <script>
      document.querySelector("button").addEventListener("click", () => {
        if (document.body.classList.contains("pink-theme")) {
          document.body.classList.remove("pink-theme");
        } else {
          document.body.classList.add("pink-theme");
        }
      });
    </script>
  </body>
</html>

到此这篇关于CSS变量实现主题切换的方法的文章就介绍到这了,更多相关CSS主题切换内容请搜索179885.Com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持179885.Com!

猜你在找的CSS变量实现主题切换的方法相关文章

当我们想写一个类似掘金的文章或者自己的博客的时候,是否有想过该怎么实现给自己文章的章节添加章节号,本文就来介绍一下使用CSS实现章节添加自增序号的方法,感兴趣
本文给大家分享CSS3实现列表无限滚动/轮播效果,实现思路大概是将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项,怎么实现无限轮播效果,下面小编给大家带来了实
在使用html进行编辑的时候,特殊符号往往会显示错误,极端情况下更可能导致网页崩溃。本文就来介绍一下如何显示特殊字符,感兴趣的可以了解一下
本文就将介绍一些使用单标签绘图的技巧,并且使用这些技巧,借用单个标签去实现一些复杂图形,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
了CSS几步实现赛博朋克2077风格视觉效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
今天来带大家做一个可爱的滑动导航栏效果,这个demo很基础,但是使用场景非常广泛,感兴趣的小伙伴们可以参考一下
本文主要介绍了Html5大屏数据可视化开发,可视化可以对统计的数据一目了然,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文主要介绍了html css3不拉伸图片显示效果,类似淘宝,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
项目有图表方面的需求,其中有做卫星定位的图形,需要制作极坐标来显示当前北半球或南半球的卫星分布情况,本文主要介绍了CSS极坐标的实例代码,分享给大家,感兴趣的可以
最近才自学了html和css,今天正好做个金字塔实例,可以清楚的看出图标数据,需要的朋友们下面随着小编来一起学习学习吧
最近在学习html+css,于是整理了一下思路,写了一个小demo,本文主要介绍了html+css实现文字折叠特效实例,感兴趣的小伙伴们可以参考一下
本文通过代码给大家讲解HTML+VUE分页实现炫酷物联网大屏功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧