vue2+vuex+less 实现主题切换

1.首先初始化 vue2 项目并安装 less 相关插件

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

2.安装样式处理插件

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

3.在 src 目录下创建 theme 文件夹并创建文件 style.less （定义样式）写代码

// 默认的主题颜色
@primaryColor: var(--primaryColor);
@primaryTextColor: var(--primaryTextColor);

 4.在根目录下创建 vue.config.js 文件 写代码

const path = require("path");
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 加上自己的路径
        path.resolve(__dirname, "./src/theme/style.less"),
      ],
    },
  },
};

5.在 theme 文件夹下创建文件 model.js （主题文件） 写代码

// 一套默认主题以及一套暗黑主题

export const themes = {
  default: {
    primaryColor: "#fff",
    primaryTextColor: "#000",
  },
  dark: {
    primaryColor: "#000",
    primaryTextColor: "#fff",
  },
};

6.在 theme 文件夹下创建文件 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];
  // 如果有主题名称，那么则采用我们定义的主题
  if (themeConfig) {
    changeStyle(themeConfig); // 改变样式
  } else {
    changeStyle(themeConfig);
  }
};

 7.组件中使用

<template>
  <div>
    <div class="text">文字</div>
    <button @click="defaultTheme">默认</button>
    <button @click="dark">黑色</button>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  pass: true,
  name: "index",
  data() {
    return {};
  },
  mounted() {
    this.init(); // 调用初始化主题方法
  },
  created() {},
  methods: {

    // 将存在 vuex 中的更改主题方法拿过来
    ...mapMutations(["setThemeStore"]),

    // 主题初始化
    init() {
      this.setThemeStore(this.$store.state.theme);
    },
    // 更改为默认主题
    defaultTheme() {
      this.setThemeStore("default");
    },
    // 更改为暗黑主题
    dark() {
      this.setThemeStore("dark");
    },
  },
};
</script>

<style lang="less" scoped>
.text {
  width: 100vw;
  height: 100px;
  background-color: @primaryColor;
  color: @primaryTextColor;
}
</style>

8. 在 store 文件夹下 创建 index.js 文件 写代码

import Vuex from "vuex";
import { setTheme } from "../theme/theme";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    theme: localStorage.getItem("theme") || "default",
  },
  mutations: {
    setThemeStore(state, theme) {
    setTheme(theme);
    }
  },
})

export default store;