Vue3 + Scss 实现主题切换效果

先给大家看一下主题切换的效果：
在这里插入图片描述

像这样的效果实现起来并不难，只是比较麻烦，目前我知道的有两种方式可以实现，分别是 CSS 变量、样式文件切换，下面是该效果的核心实现方法

CSS变量

给需要变化的样式设置 css 变量，然后可以通过 js 的 document.documentElement.style.setProperty 方法来修改 css 变量的值，从而实现主题切换的效果

<script setup lang="ts">
import { ref } from 'vue';const $css = document.documentElement.style
const is = ref<boolean>(false)const btn = () => {is.value = !is.valueis.value ? $css.setProperty("--color", "#000") : $css.setProperty("--color", "#fff")
}
</script><template><div class="box"></div><button @click="btn">按钮</button>
</template><style lang="scss">
$color: var(--color, #fff);.box {width: 200px;height: 200px;background-color: $color;transition: all 0.3s;
}
</style>

该方式适合应用于简单的切换场景，如果页面比较复杂，使用该方式会导致使用大量的 css 变量，而且写法也会很麻烦

这时候推荐使用下面这种方式

样式文件切换

该方式核心思想就是定义两套样式，通过 js 控制两套样式的切换从而实现该效果

动态加载局部样式

先准备好两个 Scss 主题样式文件：

// light.scss
.container{background-color: #fff;
}// dark.scss
.container{background-color: #000;
}

然后在 App.vue 中引入

<script setup lang="ts">
import Theme from '@/view/Theme.vue'
</script><template><Theme />
</template><style lang="scss">
.light {@import "@/styles/light.scss";
}.dark {@import "@/styles/dark.scss";
}
</style>

在 Theme.vue 中编写布局，通过动态类名来实现主题切换功能

<script setup lang="ts">
import { ref } from 'vue';const is = ref(false)
</script><template><div :class="is ? 'light' : 'dark'"><div class="container"></div></div><button @click="is = !is">切换主题</button>
</template><style scoped lang="scss">
.container {width: 300px;height: 300px;transition: all 0.3s;
}
</style>

修改link标签样式路径

直接在项目的 index.html 中通过 link 引入样式文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue + TS</title><!-- 在这里先定义一个默认的样式 --><link rel="stylesheet" href="./src/styles/light.scss" title="light"></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

在 src/App.vue 中获取 link 标签，并通过逻辑让他切换样式文件从而实现主题切换效果

<script setup lang="ts">
import { ref } from 'vue';// 获取link标签
const links = document.querySelectorAll("link")const is = ref<boolean>(false)const btn = () => {is.value = !is.value// 目前只有两个link标签，所以这里直接写死，只展示核心代码is.value ? links[1].href = "./src/styles/dark.scss" : links[1].href = "./src/styles/light.scss"
}
</script><template><div class="container"></div><button @click="btn">按钮</button>
</template><style scoped lang="scss">
.container {width: 300px;height: 300px;transition: all 0.3s;
}
</style>