theme.ts 1.1 KB

12345678910111213141516171819202122232425262728293031323334
  1. import type { ThemeConfig } from '@/types/theme'
  2. /**
  3. * 应用主题
  4. * @param theme 主题配置
  5. */
  6. export function applyTheme(theme: ThemeConfig) {
  7. const root = document.documentElement
  8. const colors = theme.colors
  9. // 设置 Vant 主题变量 (覆盖默认)
  10. root.style.setProperty('--van-primary-color', colors.primary)
  11. // 如果定义了特定按钮样式
  12. if (colors.buttonPrimaryBackground) {
  13. root.style.setProperty('--van-button-primary-background', colors.buttonPrimaryBackground)
  14. }
  15. if (colors.buttonPrimaryBorderColor) {
  16. root.style.setProperty('--van-button-primary-border-color', colors.buttonPrimaryBorderColor)
  17. }
  18. // 设置 App 全局变量
  19. root.style.setProperty('--app-primary-color', colors.primary)
  20. root.style.setProperty('--app-secondary-color', colors.secondary)
  21. root.style.setProperty('--app-bg-color', colors.background)
  22. root.style.setProperty('--app-text-color', colors.text)
  23. // 处理深色模式类名
  24. if (theme.id === 'dark') {
  25. document.documentElement.classList.add('dark')
  26. } else {
  27. document.documentElement.classList.remove('dark')
  28. }
  29. }