🎨 主題定制指南 - 讓你的應用獨一無二！

🌈 想讓你的應用擁有獨特的品牌魅力？這份主題定制寶典將帶你從零開始，打造專屬的視覺風格！從基礎的顏色調整到高級的動態主題切換，從響應式適配到深色模式支援，我們將一步步教你成為主題定制大師。準備好釋放你的創意了嗎？

🎨 主题定制方案

CSS 变量定制（推荐）

Vant 使用 CSS 变量来定义主题样式，你可以通过覆盖这些变量来定制主题。

/* 全域主题变量 */
:root {
  /* 主色调 */
  --van-primary-color: #1989fa;
  --van-success-color: #07c160;
  --van-warning-color: #ff976a;
  --van-danger-color: #ee0a24;
  
  /* 文本颜色 */
  --van-text-color: #323233;
  --van-text-color-2: #646566;
  --van-text-color-3: #969799;
  
  /* 背景颜色 */
  --van-background-color: #f7f8fa;
  --van-background-color-light: #fafafa;
  
  /* 边框颜色 */
  --van-border-color: #ebedf0;
  
  /* 字体大小 */
  --van-font-size-xs: 10px;
  --van-font-size-sm: 12px;
  --van-font-size-md: 14px;
  --van-font-size-lg: 16px;
  --van-font-size-xl: 18px;
  
  /* 间距 */
  --van-padding-base: 4px;
  --van-padding-xs: 8px;
  --van-padding-sm: 12px;
  --van-padding-md: 16px;
  --van-padding-lg: 24px;
  --van-padding-xl: 32px;
  
  /* 圆角 */
  --van-border-radius-sm: 2px;
  --van-border-radius-md: 4px;
  --van-border-radius-lg: 8px;
  --van-border-radius-max: 999px;
}

组件级定制

/* 按鈕元件定制 */
.van-button {
  --van-button-primary-background-color: #007bff;
  --van-button-primary-border-color: #007bff;
  --van-button-border-radius: 8px;
  --van-button-font-weight: 600;
}

/* 導航列定制 */
.van-nav-bar {
  --van-nav-bar-background-color: #ffffff;
  --van-nav-bar-title-text-color: #323233;
  --van-nav-bar-icon-color: #1989fa;
  --van-nav-bar-height: 56px;
}

/* 標籤頁定制 */
.van-tabs {
  --van-tabs-default-color: #646566;
  --van-tabs-line-height: 44px;
  --van-tab-active-text-color: #1989fa;
  --van-tabs-bottom-bar-color: #1989fa;
}

/* 單元格定制 */
.van-cell {
  --van-cell-background-color: #ffffff;
  --van-cell-border-color: #ebedf0;
  --van-cell-font-size: 14px;
  --van-cell-line-height: 24px;
}

🌈 品牌色彩系統

色彩配置

// theme/colors.js
export const brandColors = {
  // 主色调
  primary: {
    50: '#e3f2fd',
    100: '#bbdefb',
    200: '#90caf9',
    300: '#64b5f6',
    400: '#42a5f5',
    500: '#2196f3', // 主色
    600: '#1e88e5',
    700: '#1976d2',
    800: '#1565c0',
    900: '#0d47a1'
  },
  
  // 輔助色
  secondary: {
    50: '#fce4ec',
    100: '#f8bbd9',
    200: '#f48fb1',
    300: '#f06292',
    400: '#ec407a',
    500: '#e91e63', // 輔助色
    600: '#d81b60',
    700: '#c2185b',
    800: '#ad1457',
    900: '#880e4f'
  },
  
  // 功能色
  success: '#4caf50',
  warning: '#ff9800',
  error: '#f44336',
  info: '#2196f3',
  
  // 中性色
  gray: {
    50: '#fafafa',
    100: '#f5f5f5',
    200: '#eeeeee',
    300: '#e0e0e0',
    400: '#bdbdbd',
    500: '#9e9e9e',
    600: '#757575',
    700: '#616161',
    800: '#424242',
    900: '#212121'
  }
}

動態主題切換

<script setup>
import { ref, watch } from 'vue'

const themes = {
  light: {
    '--van-primary-color': '#1989fa',
    '--van-background-color': '#ffffff',
    '--van-text-color': '#323233'
  },
  dark: {
    '--van-primary-color': '#4fc3f7',
    '--van-background-color': '#1a1a1a',
    '--van-text-color': '#ffffff'
  },
  custom: {
    '--van-primary-color': '#e91e63',
    '--van-background-color': '#f5f5f5',
    '--van-text-color': '#2c3e50'
  }
}

const currentTheme = ref('light')

const applyTheme = (themeName) => {
  const theme = themes[themeName]
  const root = document.documentElement
  
  Object.keys(theme).forEach(property => {
    root.style.setProperty(property, theme[property])
  })
  
  // 儲存主題設定
  localStorage.setItem('theme', themeName)
}

watch(currentTheme, (newTheme) => {
  applyTheme(newTheme)
}, { immediate: true })

// 頁面載入時恢復主題
const savedTheme = localStorage.getItem('theme')
if (savedTheme && themes[savedTheme]) {
  currentTheme.value = savedTheme
}
</script>

<template>
  <div class="theme-switcher">
    <van-cell-group title="主題設定">
      <van-cell title="淺色主題" clickable @click="currentTheme = 'light'">
        <template #right-icon>
          <van-icon v-if="currentTheme === 'light'" name="success" color="#1989fa" />
        </template>
      </van-cell>
      
      <van-cell title="深色主題" clickable @click="currentTheme = 'dark'">
        <template #right-icon>
          <van-icon v-if="currentTheme === 'dark'" name="success" color="#1989fa" />
        </template>
      </van-cell>
      
      <van-cell title="自訂主題" clickable @click="currentTheme = 'custom'">
        <template #right-icon>
          <van-icon v-if="currentTheme === 'custom'" name="success" color="#1989fa" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

🎭 深色模式支援

系統級深色模式

/* 深色模式變數 */
@media (prefers-color-scheme: dark) {
  :root {
    --van-primary-color: #4fc3f7;
    --van-success-color: #4caf50;
    --van-warning-color: #ff9800;
    --van-danger-color: #f44336;
    
    --van-text-color: #ffffff;
    --van-text-color-2: #cccccc;
    --van-text-color-3: #999999;
    
    --van-background-color: #1a1a1a;
    --van-background-color-light: #2d2d2d;
    
    --van-border-color: #333333;
  }
  
  /* 元件深色模式適配 */
  .van-nav-bar {
    --van-nav-bar-background-color: #2d2d2d;
    --van-nav-bar-title-text-color: #ffffff;
  }
  
  .van-cell {
    --van-cell-background-color: #2d2d2d;
    --van-cell-border-color: #333333;
  }
  
  .van-button--default {
    --van-button-default-background-color: #333333;
    --van-button-default-color: #ffffff;
    --van-button-default-border-color: #555555;
  }
}

手動深色模式控制

// composables/useTheme.js
import { ref, computed } from 'vue'

const isDark = ref(false)

export function useTheme() {
  const toggleDark = () => {
    isDark.value = !isDark.value
    updateTheme()
  }
  
  const updateTheme = () => {
    const root = document.documentElement
    
    if (isDark.value) {
      root.classList.add('dark')
      root.classList.remove('light')
    } else {
      root.classList.add('light')
      root.classList.remove('dark')
    }
    
    localStorage.setItem('theme-mode', isDark.value ? 'dark' : 'light')
  }
  
  const initTheme = () => {
    const savedMode = localStorage.getItem('theme-mode')
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    
    isDark.value = savedMode ? savedMode === 'dark' : systemDark
    updateTheme()
  }
  
  const themeClass = computed(() => isDark.value ? 'dark' : 'light')
  
  return {
    isDark,
    themeClass,
    toggleDark,
    initTheme
  }
}

🖼️ 图标定制

自定义图标库

// 注册自定义图标
import { Icon } from 'vant'

// 方式1：使用图片URL
Icon.add('custom-icon', 'https://example.com/icon.png')

// 方式2：使用SVG字符串
Icon.add('custom-svg', `
  <svg viewBox="0 0 24 24">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
  </svg>
`)

// 方式3：使用字体图标
Icon.add('font-icon', (h) => h('i', { class: 'iconfont icon-custom' }))

图标主题适配

<script setup>
import { computed } from 'vue'
import { useTheme } from '@/composables/useTheme'

const { isDark } = useTheme()

const iconColor = computed(() => {
  return isDark.value ? '#ffffff' : '#323233'
})

const iconStyle = computed(() => ({
  color: iconColor.value,
  fontSize: '20px'
}))
</script>

<template>
  <div class="icon-container">
    <!-- 使用计算属性动态设置图标颜色 -->
    <van-icon name="star" :style="iconStyle" />
    
    <!-- 使用CSS变量 -->
    <van-icon name="heart" class="themed-icon" />
    
    <!-- 自定义图标 -->
    <van-icon name="custom-icon" :color="iconColor" />
  </div>
</template>

<style scoped>
.themed-icon {
  color: var(--van-text-color);
  font-size: var(--van-font-size-lg);
}
</style>

📱 响应式主题

断点系统

/* 响应式断点定义 */
:root {
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1440px;
}

/* 小螢幕適配 */
@media (max-width: 480px) {
  :root {
    --van-font-size-md: 12px;
    --van-padding-md: 12px;
    --van-nav-bar-height: 48px;
  }
}

/* 中等螢幕適配 */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --van-font-size-md: 14px;
    --van-padding-md: 16px;
    --van-nav-bar-height: 52px;
  }
}

/* 大螢幕適配 */
@media (min-width: 769px) {
  :root {
    --van-font-size-md: 16px;
    --van-padding-md: 20px;
    --van-nav-bar-height: 56px;
  }
}

動態字體大小

// composables/useResponsive.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useResponsive() {
  const screenWidth = ref(window.innerWidth)
  const fontSize = ref(14)
  
  const updateFontSize = () => {
    screenWidth.value = window.innerWidth
    
    if (screenWidth.value < 480) {
      fontSize.value = 12
    } else if (screenWidth.value < 768) {
      fontSize.value = 14
    } else {
      fontSize.value = 16
    }
    
    document.documentElement.style.setProperty('--dynamic-font-size', `${fontSize.value}px`)
  }
  
  onMounted(() => {
    updateFontSize()
    window.addEventListener('resize', updateFontSize)
  })
  
  onUnmounted(() => {
    window.removeEventListener('resize', updateFontSize)
  })
  
  return {
    screenWidth,
    fontSize
  }
}

🎨 主题构建工具

Sass 变量定制

// theme/variables.scss
$primary-color: #1989fa;
$success-color: #07c160;
$warning-color: #ff976a;
$danger-color: #ee0a24;

$text-color: #323233;
$text-color-2: #646566;
$text-color-3: #969799;

$background-color: #f7f8fa;
$background-color-light: #fafafa;

$border-color: #ebedf0;
$border-width: 1px;
$border-style: solid;

// 字體
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;

// 間距
$padding-base: 4px;
$padding-xs: 8px;
$padding-sm: 12px;
$padding-md: 16px;
$padding-lg: 24px;
$padding-xl: 32px;

// 圓角
$border-radius-sm: 2px;
$border-radius-md: 4px;
$border-radius-lg: 8px;
$border-radius-max: 999px;

// 陰影
$box-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.12);
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.12);
$box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.15);

// 動畫
$animation-duration-base: 0.3s;
$animation-duration-fast: 0.2s;
$animation-timing-function: ease;

主题生成器

// utils/themeGenerator.js
export class ThemeGenerator {
  constructor(baseTheme = {}) {
    this.baseTheme = baseTheme
    this.generatedTheme = {}
  }
  
  // 产生色彩变体
  generateColorVariants(baseColor) {
    const variants = {}
    const hsl = this.hexToHsl(baseColor)
    
    // 产生不同明度的变体
    for (let i = 1; i <= 9; i++) {
      const lightness = Math.max(5, Math.min(95, hsl.l + (5 - i) * 10))
      variants[`${i}0`] = this.hslToHex(hsl.h, hsl.s, lightness)
    }
    
    return variants
  }
  
  // 产生完整主题
  generateTheme(primaryColor) {
    const primaryVariants = this.generateColorVariants(primaryColor)
    
    return {
      primary: primaryVariants,
      colors: {
        primary: primaryColor,
        success: '#07c160',
        warning: '#ff976a',
        danger: '#ee0a24',
        info: primaryVariants['40']
      },
      text: {
        primary: '#323233',
        secondary: '#646566',
        disabled: '#969799'
      },
      background: {
        primary: '#ffffff',
        secondary: '#f7f8fa',
        disabled: '#f5f5f5'
      },
      border: {
        color: '#ebedf0',
        width: '1px',
        style: 'solid'
      }
    }
  }
  
  // 应用主题到CSS变量
  applyTheme(theme) {
    const root = document.documentElement
    
    Object.entries(theme).forEach(([category, values]) => {
      if (typeof values === 'object') {
        Object.entries(values).forEach(([key, value]) => {
          root.style.setProperty(`--van-${category}-${key}`, value)
        })
      } else {
        root.style.setProperty(`--van-${category}`, values)
      }
    })
  }
  
  // 颜色转换工具
  hexToHsl(hex) {
    const r = parseInt(hex.slice(1, 3), 16) / 255
    const g = parseInt(hex.slice(3, 5), 16) / 255
    const b = parseInt(hex.slice(5, 7), 16) / 255
    
    const max = Math.max(r, g, b)
    const min = Math.min(r, g, b)
    let h, s, l = (max + min) / 2
    
    if (max === min) {
      h = s = 0
    } else {
      const d = max - min
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
      
      switch (max) {
        case r: h = (g - b) / d + (g < b ? 6 : 0); break
        case g: h = (b - r) / d + 2; break
        case b: h = (r - g) / d + 4; break
      }
      h /= 6
    }
    
    return { h: h * 360, s: s * 100, l: l * 100 }
  }
  
  hslToHex(h, s, l) {
    h /= 360
    s /= 100
    l /= 100
    
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1
      if (t > 1) t -= 1
      if (t < 1/6) return p + (q - p) * 6 * t
      if (t < 1/2) return q
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6
      return p
    }
    
    let r, g, b
    
    if (s === 0) {
      r = g = b = l
    } else {
      const q = l < 0.5 ? l * (1 + s) : l + s - l * s
      const p = 2 * l - q
      r = hue2rgb(p, q, h + 1/3)
      g = hue2rgb(p, q, h)
      b = hue2rgb(p, q, h - 1/3)
    }
    
    const toHex = (c) => {
      const hex = Math.round(c * 255).toString(16)
      return hex.length === 1 ? '0' + hex : hex
    }
    
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`
  }
}

// 使用示例
const generator = new ThemeGenerator()
const customTheme = generator.generateTheme('#e91e63')
generator.applyTheme(customTheme)

📚 最佳实践

主题设计原则 - 设计师的黄金法则 ✨

1. 一致性 🎯：保持整体视觉风格统一（就像穿搭一样，要有整体感）
2. 可存取性 ♿：确保足够的对比度（让每人都能轻鬆使用）
3. 響應式 📱：適配不同螢幕尺寸（一套主題走天下）
4. 效能 ⚡：避免過度的樣式計算（美觀與效能並重）
5. 可維護性 🔧：使用變數和模組化管理（未來的你會感謝現在的你）

主題測試清單 - 上線前的最後檢查 ✅

• [ ] 淺色/深色模式切換正常（黑白分明，切換絲滑）
• [ ] 所有元件樣式一致（統一是美的基礎）
• [ ] 響應式佈局適配良好（大螢幕小螢幕都完美）
• [ ] 顏色對比度符合無障礙標準（包容性設計）
• [ ] 主題切換效能良好（瞬間變身，無卡頓）
• [ ] 自訂圖示顯示正確（每個細節都要完美）

💡 最佳實務總結 - 主題定制的成功秘訣

1. 從品牌出發 🎨

   • 基於品牌色彩體系設計主題（讓品牌深入人心）
   • 保持視覺語言的一致性（統一的美學標準）

2. 使用者體驗優先 👥

   • 支援系統級深色模式（跟隨使用者習慣）
   • 提供主題切換選項（給使用者選擇權）

3. 技術實現 🛠️

   • 使用CSS變數實現動態主題（現代化的解決方案）
   • 合理組織樣式結構（可維護的程式碼架構）

4. 效能考慮 ⚡

   • 避免頻繁的DOM操作（效能最佳化）
   • 使用CSS變數減少重繪（硬體加速）

📚 相關內容

想要深入了解更多主題定制技巧？這些資源不容錯過：

• 🚀 快速開始 - 開啟你的 Vant 之旅
• 💎 最佳實務 - 企業級開發經驗
• 🌟 Vue3 整合 - 現代化開發體驗
• ⚡ 效能最佳化 - 讓應用快如閃電
• 📱 行動端適配 - 完美適配各種裝置
• 📝 TypeScript 指南 - 型別安全的開發
• 📖 設計規範 - 設計語言和規範
• 🎯 Vant 4 - 最新版本特性
• 📱 Vant Weapp - 小程式版本
• ❓ 常見問題 - 疑難解答
• 📞 聯絡我們 - 獲取更多幫助

透過以上主題定制方案，你將能夠輕鬆打造出獨具特色的 Vant 應用介面。記住，好的主題不僅僅是好看，更要好用！讓我們一起創造出既美觀又實用的使用者體驗吧！🎨✨