vue3实现多套主题切换

目标：
使用vue3+less实现多套颜色切换
插件：

npm install style-resources-loader -D
npm install vue-cli-plugin-style-resources-loader -D

npm install less-loader@5.0.0 --save
npm install less --save

安装less一直失败的可以看一下我原来的文章也讲解到了怎么去安装。
效果浏览：



OK

首先我们先在（src）文件夹里创建一个“theme”的文件夹，其次创建一个style.less文件放我们的接口。

style.less文件

// 默认的主题颜色
@primaryColor: var(--primaryColor, #000);
@primaryTextColor: var(--primaryTextColor, #000);
// 导出变量
:export {
  name: "less";
  primaryColor: @primaryColor;
  primaryTextColor: @primaryTextColor;
}

在新建一个“theme.js”以后只需要把值传到setTheme方法里面即可改变颜色

// theme.js文件
import { themes } from "./model";
// 修改页面中的样式变量值
const changeStyle = (obj) => {
  for (let key in obj) {
    document
      .getElementsByTagName("body")[0]
      .style.setProperty(`--${key}`, obj[key]);
  }
};
// 通过setTheme改变主题
export const setTheme = (themeName) => {
  localStorage.setItem("theme", themeName); // 保存主题到本地，下次进入使用该主题
  const themeConfig = themes[themeName];
  // 如果有主题名称，那么则采用我们定义的主题
  if (themeConfig) {
    localStorage.setItem("primaryColor", themeConfig.primaryColor); // 保存主题色到本地
    localStorage.setItem("primaryTextColor", themeConfig.primaryTextColor); // 保存文字颜色到本地
    changeStyle(themeConfig); // 改变样式
  } else {
    let themeConfig = {
      primaryColor: localStorage.getItem("primaryColor"),
      primaryTextColor: localStorage.getItem("primaryTextColor"),
    };
    changeStyle(themeConfig);
  }
};

最重要的来了，需要vue.confing.js文件里面配置一下，配置保存好了后需要重启一下服务器才可以。

// vue.config.js文件
const path = require("path");
pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, "./src/views/theme/style.less"),
      ],
    },
  },

在里面在新建一个model.js文件来存放我们主题样式

/**
 * model.js文件
 * daytime：白天主题
 * dusk：傍晚
 */
export const themes = {
    daytime: {
      primaryColor: `${240}, ${248},${255}`,
      primaryTextColor: `${240}, ${248},${255}`,
    },
    dusk: {
      primaryColor: `${20},${20},${20}`,
      primaryTextColor: `${20},${20},${20}`,
    },
  };

引入修改办法

import { setTheme } from '../views/theme/theme'

// 比如我想要这个主页是傍晚主题，那么我就引入傍晚的主题名称
setTheme('daytime')

如果想到多套可以自行在model.js在定义几套就可以了

关注回复【cms】免费cms框架