css变量（主题切换）

css文件

:root.light {
--background--main: rgba(245, 245, 245, 1);
}
:root.dark {
--background--main: rgba(15, 15, 15, 1);
}
body {
background-color: var(--background--main);
}

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

 html文件

<html lang="en" class="light">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>1</body>
</html>

js文件

const html = document.querySelector(':root');
// 获取--background--main变量的内容
console.log(getComputedStyle(html).getPropertyValue('--background--main'));
setTimeout(() => {
    // 设置html也就是:root的class为dark
    html.className = 'dark';
    // 获取--background--main变量的内容
    console.log(getComputedStyle(html).getPropertyValue('--background--main'));
}, 1000);

　　

posted @ 2022-06-07 16:43  瑞瑞大人  阅读(223)  评论(0)    收藏  举报