[ 主题切换 ] Vue3 + Scss 实现主题切换效果

css.png

Vue3 + Scss 实现主题切换效果

先给大家看一下主题切换的效果:

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

CSS变量

给需要变化的样式设置 css 变量,然后可以通过 jsdocument.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">
$color: var(--color, #fff);

.box {
  width: 200px;
  height: 200px;
  background-color: $color;
  transition: all 0.3s;
}
</style>

该方式适合应用于简单的切换场景,如果页面比较复杂,使用该方式会导致使用大量的 css 变量,而且写法也会很麻烦
Snipaste_2023-11-24_20-30-29.jpg

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

样式文件切换

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

动态加载局部样式

  1. 先准备好两个 Scss 主题样式文件:

    // light.scss
    .container{
     background-color: #fff;
    }
    
    // dark.scss
    .container{
     background-color: #000;
    }
  2. 然后在 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>
  3. 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标签样式路径

  1. 直接在项目的 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>
    
  2. 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>
评论区
头像