vue使用scss、less切换主题（less篇）

本章是基于less实现全局主题切换功能
scss切换 请移步 vue使用scss切换主题

前置条件 —— 项目已安装less 和 less-loader 以及安装以下必要插件

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

1、首先还是在src文件下新建一个style文件，里面创建一个theme.less文件

theme.less

// 此处配置的是主题默认颜色
@primaryColor: var(--primaryColor,#809B54); 
@bgColor:var(--bgColor,#ccc)

// 导出变量
:export {
  name: "less";
  primaryColor: @primaryColor;
  bgColor: @bgColor;
}

2、配置vue.config.js

const path = require("path");
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 此处为上面创建的文件路径
        path.resolve(__dirname, "./src/style/theme.less"),
      ],
    },
  },
};

这时候项目就可以访问到theme.less文件里面的变量了，尝试访问，成功在往下走。

.dialog-code {
  background-color: @bgColor;  // 访问不到就把文件引入进来访问 @import url('../style/theme.less');
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
 }

3、配置自己的主题

在style文件下新建 handle.js 文件

const themes = {
  default: {  // 默认
    primaryColor: '#809B54',
    bgColor:'#ccc'
  },
  light: { // 亮色
    primaryColor: '#9A8A71',
    bgColor:'#fff'
  },
  dark: {  // 暗色
    primaryColor: '#487650',
    bgColor:'#000'
  }
}

// 修改页面中的样式变量值
const changeStyle = (obj) => {
   for (const 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) {
     localStorage.setItem('primaryColor', themeConfig.primaryColor) // 保存主题色到本地
     localStorage.setItem('bgColor', themeConfig.bgColor) // 保存主题色到本地
     changeStyle(themeConfig) // 改变样式
   } else {
     const themeConfig = {
       primaryColor: localStorage.getItem('primaryColor')  // 从本地获取
       bgColor: localStorage.getItem('bgColor')
     }
     changeStyle(themeConfig)
   }
}

这一步完成之后只要在需要切换主题色的页面引入 handle.js 使用里面的 setTheme方法来切换主题即可

示例

<template>
  <div class="box">
    <button @click="defaul">默认主题</button>
    <button @click="light">亮色主题</button>
    <button @click="dark">暗色主题</button>
    <button @click="custom">自定义主题</button>
  </div>
</template>


<script>
import { setTheme } from "../style/handle.js";
export default {
  name: "HelloWorld",
  mounted() {
    this.init(); // 初始化主题
  },
  methods: {
     // 初始化默认主题
    init() {
      setTheme("default"); 
    },
    // 更改为默认主题
    defaul() {
      setTheme("default");
    },
    // 亮色主题
    light() {
      setTheme("light");
    },
    // 暗色主题
    dark() {
      setTheme("dark");
    },
    // 自定义主题
    custom() {
      const myColor = 'green'
      localStorage.setItem("primaryColor", myColor); // 将新的主题色存入本地
      setTheme();
    },
  },
};
</script>
<style scoped lang="less">
.box {
  color: @primaryColor;
  background-color: @bgColor;
}
</style>

这样就大功告成了，大家有问题可以发评论区哦，有帮助的给作者点点赞哦！