sass切换主题

一天28小时

于 2022-02-11 22:09:27 发布

阅读量712

点赞数

CC 4.0 BY-SA版权

文章标签： sass css 前端

本文链接：https://blog.youkuaiyun.com/Programmerwhite/article/details/122889489

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@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)
    }