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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值