vue使用scss、less切换主题，进来就是赚到

最近想做一个切换主题的功能，但是发现scss和less使用起来还有些区别，写完之后自己总结了一些，大家可以看看。

1、scss切换

首先需要确保项目中已经安装了 sass 和 sass-loader

1、在src下面创建style文件夹用于存放css文件，创建theme.scss 和 handle.scss
theme.scss

$themes 下面配置的 light 和 dark 是主题颜色的名字，这个自己随意取，用的时候跟这个名字一致即可

light 和 dark 里面的配置名字也是自定义的，使用的时候保持一致即可

css 复制代码

$white: #fff;
$black: #0e1225;
$themes: (
  light: (
    // 背景色
    bg-color: $white,
    // 文字颜色
    font-color: #000,
    // 渐变背景起始色
    bg-color-start: #fefeff,
    // 渐变背景结束色
    bg-color-end: #e5f1fd,
    // 代码块背景色
    code-bg-color: #f5f7fa,
    // 代码块文字颜色
    code-font-color: #409eff,
  ),
  dark: (
    bg-color: #192342,
    font-color: #c2c2c2,
    bg-color-start: #0e1225,
    bg-color-end: #0e1225,
    code-bg-color: #2d2d2d,
    code-font-color: #ccc,
  ),
);

handle.scss

这个文件主要是采用minxi混入的方式将属性混入进去

@mixin gradient_background、@mixin font_color 这个名字也是自定义的，使用时对应即可（建议语义化，方便维护）。

css 复制代码

@import "./theme.scss";

// 从主题色map中取出对应颜色
@function themed($key) {
  @return map-get($theme-map, $key);
}

// 切换主题时 获取不同的主题色值
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    // !global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    // 判断html的data-theme的属性值  #{}是sass的插值表达式
    // & sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

// 获取渐变背景色
@mixin gradient_background($start-color, $end-color) {
  @include themeify {
    background: linear-gradient(
      to bottom,
      themed($start-color),
      themed($end-color)
    ) !important;
    transition: background-position 0.6s;
  }
}

// 获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color) !important;
  }
}

// 获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color) !important;
  }
}

// 获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color) !important;
  }
}

这里配置好之后就可以在想要设置颜色的vue文件中引入使用了

示例

js 复制代码

<template>
  <div class="aaa">
    <button @click="change">切换按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
const flag = ref(false)
onMounted(() => {
  window.document.documentElement.setAttribute('data-theme', 'light') // 进入页面默认颜色
})
const change = () => {  // 切换按钮
  flag.value = !flag.value
  if (flag.value) {
    window.document.documentElement.setAttribute('data-theme', 'dark')
  } else {
    window.document.documentElement.setAttribute('data-theme', 'light')
  }
}
</script>

<style lang="scss" scoped>
// 确保使用的是scss
@import '../style/theme/handle.scss'; // 先引入
.aaa {
  width: 500px;
  height: 500px;
  // background_color对应handle.scss 文件中的属性，'bg-color' 对应theme.scss中的属性
  @include background_color('font-color');
  @include font_color('font-color');
}
</style>

这样就ok拉（v2和v3都可以用），如果有问题，评论区或者私信我哦。有帮助的话就帮作者点个赞哦