vue2 换肤（六）

方案一：CSS 变量 + 动态类名（推荐）

 

利用 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);
}

 

 

2. 在 Vue 中动态切换主题

<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> 标签加载。

 

1. 准备主题样式文件

• 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>

 

 

方案三：通过JS 更改变量（目前项目使用该方案）

 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)
    ........
}