前言
本文中所採取的方案主要是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部分語法有問題的同學可以看看，本文更偏向於實際應用；最後感謝支持，如果有問題還望指出，有什麼地方配置出來有問題的小夥伴可以聯繫我，大家一起共同進步學習💪！
