参考vue官网实现主题切换功能前言最近学习尤大大的vue时，发现一个明暗切换的功能，想着这种比较常见的功能，一定会遇到

前言

最近学习尤大大的vue时，发现一个明暗切换的功能，想着这种比较常见的功能，一定会遇到的原则，顿时精神大振。
记录学习一次

实现原理

通过 :root 预设全局变量,然后切换的时候给根节点 html 添加类名，覆 :root 预设的变量。
通俗点就是看代码说话 😄🤣

:root {
  --gxb-background: #fff;
}

// 暗色背景颜色
.dark {
  --gxb-background: #000;
}

body {
  background-color: var(--gxb-background);
}

知识点：

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除优先级更高之外，与 html 选择器相同。
全局变量：带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var() 函数在全文档范围内复用的。

可参考 :root - CSS：层叠样式表 | MDN (mozilla.org)

demo

css

:root {
  --gxb-background: #fff;
  --gxb-font-color: #000;
}

html.dark {
  color-scheme: dark;
}

.dark {
  --gxb-background: #000;
  --gxb-font-color: #fff;
}

html,
body {
  height: 100%;
  background-color: var(--gxb-background);
}

.box {
  width: 300px;
  text-align: justify;
  margin-top: 24px;
  color: var(--gxb-font-color);
}

html

<button>主题切换</button>
<div class="box">如果把视线拉回到20年前的浙江，安吉县鲁家村村委会主任裘丽琴不会想到自己有一天能站在联合国的领奖台上；开化县金星</div>

js

  document.querySelector("button").addEventListener("click", () => {
    const domHtml = document.querySelector("html"),
      classList = Array.from(domHtml.classList),
      hasDarf = classList.indexOf("dark") != -1;

    if (hasDarf) {
      domHtml.classList.remove("dark");
    } else {
      domHtml.classList.add("dark");
    }
  });