1-安装less和必要插件

  1. npm install less-loader@5.0.0 --save
  2. npm install less --save
  • vue-cli配置需要下列插件 vite不需要
  1. npm install style-resources-loader -D
  2. npm install vue-cli-plugin-style-resources-loader -D

2-实现换肤步骤

  • 新建style.less(/src/assets/theme/style.less)
    1. // 默认的主题颜色 全局css变量
    2. @primaryColor: var(--primaryColor, #000);
    3. @primaryTextColor: var(--primaryTextColor, green);
    4. @logo:var(--logo,url(/monitor/static/imgs/index/logo.png));
    5. // 导出变量
    6. :export {
    7.   name: "less";
    8.   primaryColor: @primaryColor;
    9.   primaryTextColor: @primaryTextColor;
    10.   logo:@logo;
    11. }

3-vue配置全局less变量

  • 参考连接 https://www.cnblogs.com/zhizou/p/14574105.html

  • 3.1使用vite开发时的配置 配置vite.config.js

    1. import {defineConfig} from 'vite';
    2. import vue from '@vitejs/plugin-vue';
    3. import path from 'path';
    4. export default defineConfig({
    5. plugins: [vue()],
    6. css: {
    7.   preprocessorOptions: {
    8.     less: {
    9.       modifyVars: {
    10.         hack: `true; @import (reference) "${resolve('src/assets/theme/style.less')}";`,
    11.       },
    12.       javascriptEnabled: true,
    13.     }
    14.   }
    15. },
    16. })

3.2使用vue-cli2开发时的配置 vue.config.js

  1. const path = require('path');
  2. module.exports = {
  3.   pluginOptions: {
  4.     "style-resources-loader": {
  5.       preProcessor: "less",
  6.       patterns: [
  7.         path.resolve(__dirname, "src/assets/theme/style.less")
  8.       ]
  9.     }
  10.   }
  11. }

  • 当我们配置好vite.config.js/vue.config.js文件后，就可以在项目的任何地方使用我们预先定义的less变量了，

    3.3使用vue-cli5.x开发时的配置 vue.config.js

  • 注意“less”: “^3.10.3”,“less-loader”: “^6.0.0”,

    1. const { defineConfig } = require('@vue/cli-service');
    2. module.exports = defineConfig({
    3.   devServer:{},
    4.  // 安装：style-resources-loader
    5. chainWebpack: (config) => {
    6.   const oneOfsMap = config.module.rule('less').oneOfs.store;
    7.   oneOfsMap.forEach(item => {
    8.     item
    9.       .use('style-resources-loader')
    10.       .loader('style-resources-loader')
    11.       .options({
    12.         // 这里的路径不能使用 @ 符号，否则会报错
    13.         patterns: './src/assets/theme/style.less'
    14.       })
    15.       .end();
    16.   });
    17. },
    18. })

  • 主题配置的图片有可能找不到 将图片目录放到src同级（暂时没解决办法）

    4-配置几套可选主题

  • 在/src/assets/theme目录下新建model.js，编写自定义主题代码，代码如下：

    1. // 一套默认主题以及一套暗黑主题
    2. export const themes = {
    3. default: {
    4.   primaryColor: 'red',
    5. },
    6. dark: {
    7.   primaryColor: '#000000',
    8.   logo:'url(/monitor/static/imgs/index/logo.png)',
    9. },
    10. };

  • 示例代码如下：

  • 记得在style上加 lang=”less” 否则不生效
    1. <style lang="less" scoped>
    2. p {
    3.   color: @primaryTextColor;
    4.   background: @logo;
    5.   background-size: 100% 100%;
    6. }
    7. </style>

5-编写修改主题的方法

  • 在/src/assets/theme文件夹下新建theme.js文件，代码如下： ```bash 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]; // 如果有主题名称，那么则采用我们定义的主题 changeStyle(themeConfig); // 改变样式 };

  2. - 更改自定义主题颜色
  4. ```bash
  5. // 改变主题的方法
  6. export const setTheme = (themeName) => {
  7.   localStorage.setItem("theme", themeName); // 保存主题到本地，下次进入使用该主题
  8.   const themeConfig = themes[themeName];
  9.   // 如果有主题名称，那么则采用我们定义的主题
  10.   if (themeConfig) {
  11.     localStorage.setItem("primaryColor", themeConfig.primaryColor); // 保存主题色到本地
  12.     changeStyle(themeConfig); // 改变样式
  13.   } else {
  14.     let themeConfig = {
  15.       primaryColor: localStorage.getItem("primaryColor"),
  16.     };
  17.     changeStyle(themeConfig);
  18.   }
  19. };

6-动态变换主题

  1. <template>
  2.   <div class="hello">
  3.     <div class="box-1"></div>
  4.     <div class="box-2"></div>
  5.     <p>我是测试文字</p>
  6.     <button @click="defaultTheme">默认主题</button>
  7.     <button @click="dark">暗黑主题</button>
  8.     <button @click="custom">自定义主题</button>
  9.   </div>
  10. </template>
  11.  import {onMounted} from 'vue';
  12.  import { setTheme } from "../assets/theme/theme";
  13.  export default ({
  14.     setup(){
  15.         onMounted(()=>{
  16.             if(localStorage.getItem("theme")){
  17.                 setTheme(localStorage.getItem("theme"));
  18.             }else{
  19.                 setTheme('default');
  20.             }
  21.         });
  22.         // 更改为默认主题
  23.         const defaultTheme = () => {
  24.             setTheme("default");
  25.         }
  26.         // 更改为暗黑主题
  27.         const dark = () =>{
  28.             setTheme("dark");
  29.         }
  30.         // 更改为自定义主题
  31.         custom() {
  32.           let newColor = 'pink';
  33.           let newPrimaryColor = `${newColor.r},${newColor.g},${newColor.b}`;
  34.           localStorage.setItem("primaryColor", newPrimaryColor); // 将新的主题色存入本地
  35.           setTheme();
  36.         },
  37.         return {
  38.                 defaultTheme,
  39.             setTheme,
  40.             dark,
  41.             custom
  42.         }
  43.     }
  44.  })
  • 利用less和css变量动态修改主题，我们主要新建了3个样式文件，作用分别是默认主题、自定义的几套主题以及修改主题的工具函数
  • 通常自定义主题我们会提供给用户颜色选择面板，大家可以结合使用