---

前言

在vue項目中（我的是2.6.11版本的）使用less做到切換主題膚色。話不多說，直接開始。

一、前提條件

1. 初始化vue項目

我這里的項目是2.6.11版本的

"vue": "^2.6.11",

2. 安裝插件

安裝一些less的插件

npm install less --save // less插件
npm install less-loader@5.0.0 --save // less-loader作用就是將less代碼轉譯為瀏覽器可以識別的CSS代碼。
npm install style-resources-loader -D // 在樣式引入時，對于變量的引入，需要在每個文件里都要引入一遍，為了避免每次使用時都需要單獨引入一遍的問題，采用了 style-resources-loader

二、新建文件夾主題theme

路徑： src > assets > style > theme
翻譯：theme 的中文就是主題
注意點：考慮到切換樣式也是樣式中的，所以放在style里面，當然，你可以放在任意位置，只要你后面的路徑同一改了就好。

1.style.less文件

// 默認的主題顏色(白低黑字)
@baseColor: var(--baseColor, rgba(25,121,255));
@pageBgColor: var(--pageBgColor, rgba(255,255,255));
@scrollBgColor: var(--scrollBgColor, rgba(0, 0, 0));
@resultBgColor: var(--resultBgColor, rgba(255,192,203));
@resultBorderColor: var(--resultBorderColor, rgba(255,255,0));
@resultTextColor: var(--resultTextColor, rgba(0,0,0, 0.9));// 導出變量 （如果在 src/assets/style/theme/model文件中配置了，就直接導出里面的字體使用）
:export {name: "less";baseColor: @baseColor;pageBgColor: @pageBgColor;scrollBgColor: @scrollBgColor;resultBgColor: @resultBgColor;resultBorderColor: @resultBorderColor;resultTextColor: @resultTextColor;
}

2.model.js文件

// 一套默認主題以及一套暗黑主題
export const themes = {default: {baseColor: `${25}, ${121},${255}`, // 基色（無變化） pageBgColor: `${255}, ${255},${255}`, // 頁面的背景色scrollBgColor: `${0}, ${0},${0}`, // 滾動條的背景色resultBgColor: `${255}, ${192},${203}`, // 結果背景色resultBorderColor: `${255}, ${255},${0}`, // 結果區背景色resultTextColor: `${0}, ${0},${0}, 0.9`, // 結果文字},dark: {baseColor: `${25}, ${121},${255}`, // 基色（無變化） pageBgColor: `${0}, ${0},${0}`, // 頁面的背景色scrollBgColor: `${255}, ${255},${255}`, // 滾動條的背景色resultBgColor: `${135}, ${206},${235}`, // 結果背景色resultBorderColor: `${0}, ${128},${0}`, // 結果區背景色resultTextColor: `${255}, ${255},${255}, 0.9`, // 結果文字},
};

3.theme.js文件

import { themes } from "./model";
// 修改頁面中的樣式變量值
const changeStyle = (obj) => {for (let key in obj) {document.getElementsByTagName("body")[0].style.setProperty(`--${key}`, obj[key]);}
};
// 改變主題的方法
export const setTheme = (themeName) => {localStorage.setItem("theme", themeName); // 保存主題到本地，下次進入使用該主題const themeConfig = themes[themeName] ? themes[themeName] : themes['default'];changeStyle(themeConfig);
};

theme文件夾最終效果

三、修改vue.config.js文件

const path = require('path');
module.exports = {pluginOptions: {"style-resources-loader": {preProcessor: "less",patterns: [// 這個是加上自己的路徑,不能使用(如下:alias)中配置的別名路徑path.resolve(__dirname, "./src/assets/style/theme/style.less"),],},},
};

注意： 修改vue.config.js文件 記得重新啟動項目。

四、頁面上的具體使用

1. index.vue 頁面

<template><div class="index"><button class="btn" @click="themeDefault">默認</button><button class="btn" @click="themeDark">暗黑</button><div class="content">這是一個可以切換主題的盒子</div>  </div>  
</template><script>
import { setTheme } from "../assets/style/theme/theme"; // 引入切換主題方法
export default {data() {return {}},methods: {// 默認主題方案（白底黑字）themeDefault() {document.documentElement.removeAttribute('theme-mode'); // 重置為淺色模式this.themeChange = true;setTheme("default"); // 初始化未默認主題},// 暗黑主題（黑底白字）themeDark() {document.documentElement.setAttribute('theme-mode', 'dark'); // 重置為深色模式this.themeChange = false;setTheme("dark");},},mounted: function() {this.themeDefault(); // 進入頁面默認渲染默認主題方案}
}
</script><style lang="less" scoped>
@import '../assets/style/theme/style.less'; // 引入主題樣式文件.index{width: 100%;height: 100%;.btn {width: 50px;height: 30px;background-color: green;}.content {width: 100px;height: 100px;color: rgba(@resultTextColor, 1);background-color: rgba(@resultBgColor, 1);border: 10px solid  rgba(@resultBorderColor, 1);}
}
</style>

2. index.vue 頁面注意點說明

3. index.vue 效果

（1）默認效果

（2）暗黑效果

其他校驗修改主題成功的方法
在審查元素的body上有你所定義的數據就是了

五、在js中使用定義的顏色變量

1. 代碼

import themsColor from '../assets/style/theme/style.less'; // 引入主題樣式文件
export default {data() {return {themsColor,}},mounted: function() {console.log('themsColor', themsColor);}
}

2. 代碼說明

3. 打印themsColor

六、關于定義顏色的變量不是十六進制的原因

如果你在modes.js中使用 #ffffff #333333 類似這樣的顏色，其實也是可以的，而且在頁面中可以直接使用 color: @resultTextColor,看過去似乎簡單了很多，那為什么要改用rgb的方式呢？
相信有仔細注意代碼的人可能注意到了這個顏色的值${255}, ${255},${255}, 0.9, 是的，透明度。
如果直接寫死的十六進制的話，沒有可以操作的空間。包括我實際項目最開始用的也是十六進制，后面才改成的rgb的方式。不僅僅是文字，包括顏色中也會有禁用等需要直接修改透明度的方法，不用因此再添加一個類似的變量考慮才使用的rgba的方法。當然，這也僅僅是一種思路。如果你有更好的方法可以忽略。
注意點：有透明度的就和顏色一樣，加在后面就好了，沒有透明度的話，就在后面加上1，不然可能沒效果。