Vue3 + Scss 实现主题切换效果

坚韧的钥匙扣

已于 2023-12-13 18:19:34 修改

阅读量1.7k

点赞数 35

分类专栏：大前端文章标签： scss 前端 css

于 2023-12-13 18:19:26 首次发布

本文链接：https://blog.youkuaiyun.com/liuyuyang01/article/details/134978991

版权

本文详细介绍了如何利用Vue3和Scss来创建主题切换效果。两种方法包括使用CSS变量通过JavaScript修改，以及动态加载不同主题的样式文件。CSS变量适用于简单场景，而样式文件切换更适用于复杂应用，通过动态控制link标签引用不同的样式文件实现主题切换。

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

Vue3 + Scss 实现主题切换效果

在现代的Web应用程序中，主题切换是一种常见的需求。本文将介绍如何使用Vue 3和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.value
  is.value ? $css.setProperty("--color", "#000") : $css.setProperty("--color", "#fff")
}
</script>

<template>
  <div class="box"></div>
  <button @click="btn">按钮</button>
</template>

<style lang="scss">