[vue2] 主题换肤功能，可 css样式 + 图片一起换肤

lyt-top

已于 2023-04-24 00:47:09 修改

阅读量844

点赞数 1

文章标签： css 前端 javascript

于 2023-04-24 00:21:34 首次发布

本文链接：https://blog.csdn.net/qq_34450741/article/details/130333445

版权

本文介绍了如何在Vue2或Vue3项目中实现主题切换功能，通过修改CSS变量来改变应用的颜色风格。提供了`useTheme`函数，包含蓝色和紫色主题的示例，并讨论了处理背景图片切换的问题，以及在SCSS中定义变量和在JavaScript中应用的方法。此外，文章还提及了项目目录结构和引入SCSS文件的注意事项。

摘要由CSDN通过智能技术生成

`以下内容为 vue2 内容，只是提供思路，vue3也可参考下`

一、效果图

在这里插入图片描述

二、切换主题 theme.js

只需要改对比 css 变量内容颜色即可

/**
 * 主题切换函数
 * @methods blue 蓝色主题
 * @methods purple 紫色主题
 */
export function useTheme() {
  return {
    blue() {
      return {
        "--next-color-primary": "#409eff",
        "--next-color-success": "#67c23a",
        "--next-color-warning": "#e6a23c",
        "--next-color-danger": "#f56c6c",
        "--next-color-info": "#909399",
        "--next-text-color-primary": "#303133",
        "--next-text-color-regular": "#606266",
        "--next-text-color-secondary": "#909399",
        "--next-text-color-placeholder": "#c0c4cc",
        "--next-border-color-base": "#dcdfe6",
        "--next-border-color-light": "#e4e7ed",
        "--next-border-color-lighter": "#ebeef5",
        "--next-border-color-extra-light": "#f2f6fc",
        "--next-font-size-extra-large": "20px",
        "--next-font-size-large": "18px",
        "--next-font-size-medium": "16px",
        "--next-font-size-base": "14px",
        "--next-font-size-small": "13px",
        "--next-font-size-extra-small": "12px",
        "--next-bg-img-menu": "var(--next-bg-img-blue)",
      };
    },
    purple() {
      return {
        "--next-color-primary": "red",
        "--next-color-success": "red",
        "--next-color-warning": "red",
        "--next-color-danger": "red",
        "--next-color-info": "red",
        "--next-text-color-primary": "red",
        "--next-text-color-regular": "red",
        "--next-text-color-secondary": "red",
        "--next-text-color-placeholder": "red",
        "--next-border-color-base": "red",
        "--next-border-color-light": "red",
        "--next-border-color-lighter": "red",
        "--next-border-color-extra-light": "red",
        "--next-font-size-extra-large": "1px",
        "--next-font-size-large": "1px",
        "--next-font-size-medium": "1px",
        "--next-font-size-base": "1px",
        "--next-font-size-small": "11px",
        "--next-font-size-extra-small": "1px",
        "--next-bg-img-menu": "var(--next-bg-img-purple)",
      };
    },
  };
}

三、图片切换，需处理下

1、如："--next-bg-img-menu": "var(--next-bg-img-blue)" 与 "--next-bg-img-menu": "var(--next-bg-img-purple)"，因为 xxx.style.setProperty 不能直接设置 data:image/png; base64 链接。
2、也就是不能直接使用 "--next-bg-img-menu": require('@/assets/image/logo.png')
3、具体处理，随便 xxx.scss 中定义 :root 变量，把变量直接扔给 theme.js（第二步）中的 "--next-bg-img-menu": "var(--next-bg-img-purple)"

:root {
  --next-bg-img-blue: url(@/assets/image/menu.png);
  --next-bg-img-purple: url(@/assets/image/logo.png);
}

四、切换函数

<template>
  <div id="app">
    <div class="warp">
      <div class="warp-left">
        <div class="warp-left-menu">我的菜单</div>
      </div>
      <div class="warp-right">
        <button @click="onThemeToggle('blue')">主题切换1</button>
        <button @click="onThemeToggle('purple')">主题切换2</button>
      </div>
    </div>
  </div>
</template>

<script>
import { useTheme } from "@/utils/theme";
export default {
  name: "App",
  mounted() {
    const { blue } = useTheme();
    this.initTheme(blue());
  },
  methods: {
    // 初始化 :root 样式
    initTheme(theme) {
      this.$nextTick(() => {
        const htmls = document.documentElement;
        for (let i in theme) {
          htmls.style.setProperty(i, theme[i]);
        }
      });
    },
    // 主题切换
    onThemeToggle(type) {
      const { blue, purple } = useTheme();
      const theme = {
        blue: blue(),
        purple: purple(),
      };
      this.initTheme(theme[type]);
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  .warp-left {
    height: inherit;
    width: 200px;
    border: 1px solid red;
    background: var(--next-bg-img-menu);
    .warp-left-menu {
      color: var(--next-color-primary);
    }
  }
  .warp-right {
    height: inherit;
    flex: 1;
    border: 1px solid red;
  }
}
</style>

五、项目目录结构（仅供参考）

在这里插入图片描述

六、其它事项

1、需要注意，mian.js 中引入 scss，import "@/assets/style/index.scss";

import Vue from "vue";
import App from "./App.vue";
import "@/assets/style/index.scss";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");