一文搞定前端多种主题配置及全局引入scss文件

前言

本文中所采取的方案主要是css预处理（less/scss）方案，适用于项目中有多套主题需要进行配置，有着很强的扩展性和易用性，如果你的项目临时需要加上主题切换，可以采用；如果你的项目需要很多套主题配置，也非常适用！

---

一、变量配置的代码部分

1、主题变量的配置 theme.scss（在项目中存放在style文件夹下面，这个文件夹主要用于系统一些公共样式的存放和管理）

// 主题配置
$themes: (
  //暗黑主题
  dark:
    (
    //请注意这里的名字可以随意取，这里不是css，只是一个变量而已！
      background-color:#1A1D1F,//背景色
      main-area-bgColor:#111315, //右侧操作面板背景区域颜色
      font-color:#FFFFFF //字体颜色
    ),
  //亮色主题
  light:
    (
      background-color:#FFFFFF,
      main-area-bgColor:#F5F6FA,
      font-color: #000000
    ),
  //后续如果有其它颜色主题，可以在此处扩展
);

//下面两个方法是根据当前全局获取到的主题色进行遍历，从而找到当前主题下对应配置值

//主题遍历生成样式
@mixin theme-foreach {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;//变量通过!global提升为全局变量,供后续取值使用
    [data-theme="#{$theme-name}"] & {
       //插槽占位
      @content;
    }
  }
}
//获取主题属性值
@function theme-value($key) {
  @return map-get($theme-map, $key);
}

//从这里开始，就是我们需要在项目代码里面具体要使用的部分了


//设置背景颜色
//这里相当于从当前主题下寻找background-color这个变量所定义的值，最终返回成css样式：background-color: #FFF!important;
@mixin background-color {
  @include theme-foreach {
    background-color: theme-value("background-color") !important;
  }
}
//设置主操作区域颜色
@mixin main-area-bgColor{
  @include theme-foreach {
    background-color: theme-value("main-area-bgColor") !important;
  }
}

//设置字体颜色
@mixin font-color {
  @include theme-foreach {
    color: theme-value("font-color") !important;
  }
}

2、主题设置 theme.js，包含当前项目关于主题的一些配置，如默认主题，主题对应文字和一些替换主题的方法（在项目中存放在settings文件夹下面，这个文件夹主要用于系统的公共配置项）

// 定义这个有利于系统主题部分统一的管理
export const THEME_ENUM = {
  dark: 'dark',
  light: 'light'
}
// 这个就是主题英文名称对应的一个汉字翻译
export const THEME_TEXT_ENUM = {
  dark: "深色",
  light: "浅色",
};

// 默认主题，我这里配置为dark
export const getDefaultTheme = () => {
  return  THEME_ENUM.dark
}

// 获取主题文字
export const getThemeText = (theme) => {
  // 不存在 拦截
  if (!THEME_ENUM.hasOwnProperty(theme)) return '不支持主题'
  return THEME_TEXT_ENUM[theme]
}

//这个是一个进行主题切换的一个方法
export const setDocumentTheme = (theme) => {
  if (!THEME_ENUM.hasOwnProperty(theme)) return
  document.documentElement.setAttribute("data-theme", theme);
}

二、引用变量在style当中和如何进行主题切换

1、在style当中如何使用，这里是在vue项目当中

<style lang="scss" scoped>
//导入主题scss
@import "@/styles/theme.scss";
.app-main {
  margin-left: 340px;
  overflow: hidden;
  @include main-area-bgColor; //最终这里就会编译为background-color: #F5F6FA!important;
}
</style>

2、主题如何进行切换

import { 
   setDocumentTheme,
} from "@/settings/theme.js";
//最终在你的方法里面调用这个导入的 setDocumentTheme即可，如
const changeTheme = (theme)=>{
    if(!theme) return
    setDocumentTheme(theme)
}

这里补充一个在项目默认进来的时候加载默认主题的方法，vue项目中的app.vue中

<template>
    <div id="app"></div>
</template>

<script>
import { setDocumentTheme, getDefaultTheme } from "@/settings/theme.js";
export default {
  name: "App",
  data() {
    return {};
  },
  watch: {},
  created() {
    setDocumentTheme(getDefaultTheme());
  },
  mounted() {},
  methods: {},
};
</script>

---

到此，你就可以进行一个主题配置的切换了；如果你觉得一个一个文件去引入theme.scss太过麻烦，那你可以继续往后看一下！

补充：全局引入theme.scss

在你的项目当中，找到vue.config.js这个文件夹，在里面补充下面代码css对象，你就完成了全局引入，不需要一个一个文件的手动引入！（记得更换成你自己的目录地址！配置完这个需要重新run一下代码，不然可能会有问题！）

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/styles/theme.scss";`
      },
    }
  }
}

---

借鉴于☞这一位大佬的写的文章

https://blog.csdn.net/sd1sd2/article/details/135840817

里面有非常详细的每个地方的描述，有对scss部分语法有问题的同学可以看看，本文更偏向于实际应用；最后感谢支持，如果有问题还望指出，有什么地方配置出来有问题的小伙伴可以联系我，大家一起共同进步学习💪！