sass切换主题

最新推荐文章于 2025-06-27 17:32:18 发布

原创最新推荐文章于 2025-06-27 17:32:18 发布 · 725 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sass #css #前端

这篇文章介绍如何使用CSS变量和JavaScript实现网页元素根据不同主题颜色的变化。通过`data-theme`属性，可以轻松切换主题，背景色和文字颜色随之调整，适合多场景应用。

@mixin theme {
  color: #fff;
  background-color: #000;
  [data-theme="theme1"] & {
    color: #f00;
    background-color: antiquewhite;
  }
  [data-theme="theme2"] & {
    color: green;
    background-color: aqua;
  }
  [data-theme="theme3"] & {
    color: #f0f;
    background-color: brown;
  }
}
  changeTheme (theme) {
      window.document.documentElement.setAttribute('data-theme', theme)
    }