vue3中使用sass实现切换主题功能_vue3.0项目中使用scss动态切换页面主题风格

实现scss切换主题

主题切换是项目常见的一个功能，在用户环境下可以自己选择模式，所以今天就来实现一个scss主题切换

实现思路

其实实现主题切换是比较简单的，我们来创建俩个scss文件分别是variable.scss和mixin.scss,因为要切换颜色所以我们要在variable文件中定义样式，然后在mixin中定义一个混入，然后再在vue文件引入我们的混入方法就好了，话不多说下面就是实战了

定义variable变量

$font-color-c6875c:#c6875c;
$font-color-bd827c:#bd827c;
$font-color-d9c19f:#d9c19f;
$font-color-9388b3:#9388b3;
$font-color-8a9cc2:#8a9cc2;
$font-color-2d262d:#2d262d;
$font-color-232122:#232122;
$font-color-7aa297:#7aa297;
$font-color-2B5575:#2B5575;
1
2
3
4
5
6
7
8
9

像我这样在variable.scss中写入这些颜色变量,然后我们就可以在mixin文件中混入

定义mixin混入函数

关于混入这一块如果没有scss基础可能会有点懵，混入其实就是scss提供的一个方法，他可以让你在整个网站上定义一个重复使用css变量的方法，然后还可以根据条件来该变值，所以我们才可以利用他来切换主题

@mixin font_color($color) {
  /*通过该函数设置字体颜色，后期方便统一管理；*/
  color: $color !important;
  [data-theme="theme1"] & {
    color: $font-color-2B5575 !important;
  }
}
1
2
3
4
5
6
7

通过这种方式来定义一个混入，传入的color将会做为你的初始颜色，然后你可以通过@include指令来使用

vue页面中使用和切换

<template>
  <div @click="switch">
     主题文字切换 
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'; 
const flag= ref<boolean>(false);
const switch = () => {
    // 在这里传入一个一个属性来改变全局
    flag.value = !flag.value;
    flag.value ? window.document.documentElement.setAttribute("data-theme", "theme1")
               : window.document.documentElement.setAttribute("data-theme", "");
}
</script>

<style lang="scss" scoped>
@import "../../assets/mixin.scss";
.font{
  @include font_color($font-color-c6875c:#c6875c);
  // 这个color是通过变量来注册的，但你也可以随便传入一个颜色进去，比如:#ffffff;
  
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

好了所有步骤就都完成了，主题切换也大功告成了，下面是俩张实现的图，但不是上面的代码，是为了简洁一点会方便大家的理解


最后如果实现中出现了报错，可以加群：662934214