使用CSS 或 SASS 实现主题背景切换效果_sass实现主题切换-CSDN博客

🎉应用背景

🎉分析实现思路

🎉CSS实现主题切换

🎉SCSS实现主题切换

🎉结语

🎉应用背景

现在的主流网站中，无论是一些技术文档获取官网，都存在着使用一个switch按钮实现主题背景切换的一个效果，那么这种效果是怎么实现的呢？

🎉分析实现思路

其实我们去查看一些携带了这种功能的官网，可以看到他们是在html标签这种通过控制其类名来实现的主题切换，我们可以参考这种思路来定义我们自己的主题。

🎉CSS实现主题切换

css来实现主题切换，需要用到的是css变量，我们可以根据项目主题定义二套变量，然后通过判断html元素上面的class变量来实现切换主题。

我在style.css文件中定义了二套主题，root下的是默认的主题，dark下的是暗色主题

:root {
  --main-bgc: pink;
  --main-text-color: black;
}

.dark {
  --main-bgc: #000;
  --main-text-color: #fff;
}

<template>
  <div class="item">
    <h1>当前主题为亮色</h1>
    <button class="btn1" @click="changeTheme">点击切换主题</button>
  </div>
</template>

<style>
.item {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: cent