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