Vue3项目的换肤思路-也许最佳实践

1. 整体架构

项目采用了 Vue3 + Vuex 的技术栈来实现换肤功能，主要包含以下几个核心部分：

• 主题配置文件（src/utils/theme.js）
• 主题切换组件（src/components/ThemeSwitch.vue）
• 主题状态管理（src/store/modules/theme.js）

2. 主题配置

2.1 主题定义

在 theme.js 中定义了两套主题配置：

export const themes = {
   
   
  light: {
   
   
    '--primary-color': '#1890ff',
    '--background-color': '#ffffff',
    // ... 其他样式变量
  },
  dark: {
   
   
    '--primary-color': '#177ddc',
    '--background-color': '#141414',
    // ... 其他样式变量
  }
}

主题配置采用 CSS 变量的方式，包含了：

• 主色调
• 背景色
• 文字颜色
• 边框颜色
• 菜单相关样式
• 等其他UI组件样式变量

2.2 主题工具函数

提供了两个核心工具函数：

// 设置主题
export function setTheme