vue2 换肤（六）

博客园 - Mc525

antv3 x6 基本语法-流程图（二） element ui el-form 表单错误滚动可视区域 vue2 element ui el-table大数据处理无分页解决方案-分片加载 vue2 地图热力图 -下钻省市县三级及地图资源文件 vue2 组件封装 el-select vue2 组件封装 el-input vue2 组件封装 el-date-picker 日期 vue2 scss sass 基础安装包、安装依赖报错！！！ vue2 封装组件使用 v-mode【el-radio,el-input】 Mac Jenkins 环境部署 vue2 按钮权限（七） vue2 项目实例国际化（五） vue2 项目实例动态路由菜单（四） vue2 项目实例 Mock数据模拟（三） vue2 项目实例 Layout布局（二） vue2 项目实例项目初始化（一） vue2 项目架构--api.js（七） vue2 项目架构--vue.config.js（七） vue2 项目架构--main.js（六）

vue2 换肤（六）

Mc525 · 2025-09-30 · via 博客园 - Mc525

利用 CSS 变量的动态特性，通过切换根元素类名来修改变量值，实现换肤。

styles/theme.css

========定义好主题颜色========

/* 默认主题 */
:root {
  --primary-color: #42b983; /* Vue 绿 */
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* 暗黑主题 */
:root.dark {
  --primary-color: #35495e;
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

/* 红色主题 */
:root.red {
  --primary-color: #e74c3c;
  --bg-color: #fff5f5;
  --text-color: #c0392b;
}

/* 应用变量到元素 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

button {
  background-color: var(--primary-color);
}

<template>
  <div>
    <button @click="changeTheme('default')">默认主题</button>
    <button @click="changeTheme('dark')">暗黑主题</button>
    <button @click="changeTheme('red')">红色主题</button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 初始化时读取本地存储的主题
    const savedTheme = localStorage.getItem('theme') || 'default';
    this.changeTheme(savedTheme);
  },
  methods: {
    changeTheme(theme) {
      // 移除所有主题类名

      document.documentElement.classList = []

 
    //  document.documentElement.classList.remove('dark', 'red', 'default');
      // 添加当前主题类名（默认主题可不加类名，使用 :root 原生样式）
      if (theme !== 'default') {
        document.documentElement.classList.add(theme);
      }
      // 保存主题到本地存储
      localStorage.setItem('theme', theme);
    }
  }
};
</script>

vuex 流程

初始化时在，getuserInfo接口获取用户信息，比如主题色，  调用 this.$dispatch 设置

document.documentElement.classList.add(theme); 设置样式， 会加载主题色样式点击切换主题色：通过触发vuex    this.$dispatch 方法，流程相同、

针对主题样式差异较大的场景，可以为每个主题创建独立的 CSS 文件，通过动态添加 <link> 标签加载。

theme-default.css（默认主题）
theme-dark.css（暗黑主题）
theme-red.css（红色主题）

<template>
  <div>
    <button @click="loadTheme('default')">默认</button>
    <button @click="loadTheme('dark')">暗黑</button>
  </div>
</template>

<script>
export default {
  mounted() {
    const theme = localStorage.getItem('theme') || 'default';
    this.loadTheme(theme);
  },
  methods: {
    loadTheme(theme) {
      // 移除已加载的主题样式
      const oldLink = document.querySelector('#theme-link');
      if (oldLink) oldLink.remove();

      // 创建新的 link 标签加载主题
      const link = document.createElement('link');
      link.id = 'theme-link';
      link.rel = 'stylesheet';
      link.href = `/styles/theme-${theme}.css`; // 路径根据实际情况调整
      document.head.appendChild(link);

      localStorage.setItem('theme', theme);
    }
  }
};
</script>

 document.documentElement.style.setProperty('--primary-color', '#2c3e50');
 document.documentElement.style.setProperty('--secondary-color', '#95a5a6');

使用方法

1定义主题色：

通过JS 设置主题色，根据实际需要

settingTheme.js

module.exports = {
  title: '其它设置',
  /**
   * 主题色
   */
  themeList: [ 
    {
      themeName: 'blue',
      themeColor: '#dd8726',
      .......
    }
  ],
   
}

vuex action

changeThemeInfo({ commit }, themeInfo) {
   // 可以迭代展示定义样式
    document.body.style.setProperty('--menu-bg', themeInfo.menuBg)
    ........
}

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - Mc525