🎨 主题定制 - 打造独一无二的 Vant 风格

🌈 欢迎来到主题定制的世界！

想要让你的应用拥有独特的视觉风格吗？Vant 提供了强大而灵活的主题定制能力，就像一个调色盘，让你可以随心所欲地调配出属于自己的色彩！

无论你是想要：

🎯 品牌化定制 - 让应用完美契合公司品牌色
🌙 深色模式 - 为用户提供护眼的夜间体验
🎨 个性化风格 - 打造与众不同的视觉效果
📱 多主题切换 - 让用户自由选择喜欢的主题

Vant 都能帮你轻松实现！

⚡ 快速上手

🎯 方法一：CSS 变量覆盖（推荐）

这是最简单、最直接的方式，就像换衣服一样简单！

css

/* 在你的全局样式文件中 */
:root {
  /* 🎨 主色调 - 让你的应用拥有独特的品牌色 */
  --van-primary-color: #07c160;
  
  /* 🔴 危险色 - 用于警告和删除操作 */
  --van-danger-color: #ee0a24;
  
  /* 🟠 警告色 - 用于提醒用户注意 */
  --van-warning-color: #ff976a;
  
  /* ✅ 成功色 - 用于成功状态提示 */
  --van-success-color: #07c160;
  
  /* ℹ️ 信息色 - 用于一般信息提示 */
  --van-info-color: #1989fa;
}

✨ 立即生效：保存文件后，你的应用就会应用新的主题色彩！

🎨 方法二：Less/Sass 变量定制

如果你使用 Less 或 Sass，可以享受更强大的定制能力：

less

// theme.less
@primary-color: #1890ff;
@success-color: #52c41a;
@warning-color: #faad14;
@danger-color: #f5222d;

// 导入 Vant 样式
@import '~vant/lib/index.less';

🌟 核心主题变量

🎨 色彩系统

Vant 的色彩系统经过精心设计，每种颜色都有其特定的语义：

css

:root {
  /* 🎯 主色系 - 品牌的核心色彩 */
  --van-primary-color: #1989fa;
  --van-primary-color-dark: #0960bd;
  --van-primary-color-light: #73b3fa;
  
  /* 🔴 危险色系 - 错误和警告 */
  --van-danger-color: #ee0a24;
  --van-danger-color-dark: #ad0e23;
  --van-danger-color-light: #f54e2e;
  
  /* 🟠 警告色系 - 需要注意的信息 */
  --van-warning-color: #ff976a;
  --van-warning-color-dark: #ed6a0c;
  --van-warning-color-light: #ffad85;
  
  /* ✅ 成功色系 - 成功状态 */
  --van-success-color: #07c160;
  --van-success-color-dark: #059a4c;
  --van-success-color-light: #39d374;
  
  /* ℹ️ 信息色系 - 一般信息 */
  --van-info-color: #1989fa;
  --van-info-color-dark: #0960bd;
  --van-info-color-light: #73b3fa;
}

📐 尺寸系统

统一的尺寸规范，让你的界面更加协调：

css

:root {
  /* 📏 基础尺寸 */
  --van-base-font-size: 14px;
  --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-radius-sm: 2px;
  --van-radius-md: 4px;
  --van-radius-lg: 8px;
  --van-radius-max: 999px;
}

🌫️ 灰度系统

精心调配的灰度色阶，营造层次感：

css

:root {
  /* 🖤 文字颜色 */
  --van-text-color: #323233;
  --van-text-color-2: #646566;
  --van-text-color-3: #969799;
  
  /* 🔘 边框颜色 */
  --van-border-color: #ebedf0;
  --van-border-color-light: #f7f8fa;
  
  /* 🎨 背景颜色 */
  --van-background: #f7f8fa;
  --van-background-2: #fafafa;
}

🌙 深色模式

🔧 启用深色模式

Vant 内置了完整的深色模式支持，只需要添加一个类名：

html

<!-- 为整个应用启用深色模式 -->
<div class="van-theme-dark">
  <!-- 你的应用内容 -->
</div>

🎨 深色模式变量

css

.van-theme-dark {
  /* 🌙 深色模式专用色彩 */
  --van-text-color: #f5f5f5;
  --van-text-color-2: #cccccc;
  --van-text-color-3: #999999;
  
  --van-background: #000000;
  --van-background-2: #1a1a1a;
  
  --van-border-color: #3a3a3c;
  --van-border-color-light: #2c2c2e;
}

🔄 动态切换主题

实现主题切换功能：

javascript

// 主题切换工具类
class ThemeManager {
  constructor() {
    this.isDark = false;
    this.init();
  }
  
  init() {
    // 🔍 检查本地存储的主题偏好
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
      this.enableDarkMode();
    }
  }
  
  // 🌙 启用深色模式
  enableDarkMode() {
    document.documentElement.classList.add('van-theme-dark');
    this.isDark = true;
    localStorage.setItem('theme', 'dark');
  }
  
  // ☀️ 启用浅色模式
  enableLightMode() {
    document.documentElement.classList.remove('van-theme-dark');
    this.isDark = false;
    localStorage.setItem('theme', 'light');
  }
  
  // 🔄 切换主题
  toggle() {
    if (this.isDark) {
      this.enableLightMode();
    } else {
      this.enableDarkMode();
    }
  }
}

// 使用示例
const themeManager = new ThemeManager();

// 在按钮点击时切换主题
document.getElementById('theme-toggle').addEventListener('click', () => {
  themeManager.toggle();
});

🎨 实际应用场景

🏢 企业品牌定制

为企业应用定制专属主题：

css

/* 🏢 企业蓝主题 */
:root {
  --van-primary-color: #0052cc;
  --van-primary-color-dark: #003d99;
  --van-primary-color-light: #4285f4;
  
  /* 🎨 辅助色彩 */
  --van-success-color: #00875a;
  --van-warning-color: #ff8b00;
  --van-danger-color: #de350b;
  
  /* 📐 定制圆角 - 更商务的感觉 */
  --van-radius-sm: 4px;
  --van-radius-md: 6px;
  --van-radius-lg: 8px;
}

🎮 游戏风格主题

为游戏应用打造炫酷主题：

css

/* 🎮 游戏风格主题 */
:root {
  --van-primary-color: #ff6b35;
  --van-primary-color-dark: #e55a2b;
  --van-primary-color-light: #ff8c69;
  
  /* ⚡ 高对比度配色 */
  --van-success-color: #00ff88;
  --van-warning-color: #ffdd00;
  --van-danger-color: #ff3366;
  
  /* 🔥 更大的圆角 */
  --van-radius-md: 12px;
  --van-radius-lg: 16px;
  
  /* 💫 特殊效果 */
  --van-button-primary-background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

🌸 粉色少女风

打造温馨可爱的粉色主题：

css

/* 🌸 粉色少女风主题 */
:root {
  --van-primary-color: #ff69b4;
  --van-primary-color-dark: #e91e63;
  --van-primary-color-light: #ffb3d9;
  
  /* 💕 温馨配色 */
  --van-success-color: #ff9999;
  --van-warning-color: #ffcc99;
  --van-danger-color: #ff6666;
  
  /* 🎀 柔和背景 */
  --van-background: #fff5f8;
  --van-background-2: #ffe4e9;
}

🛠️ 高级定制技巧

🎨 组件级别定制

针对特定组件进行深度定制：

css

/* 🔘 按钮组件定制 */
.van-button--primary {
  /* 🌈 渐变背景 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  
  /* ✨ 阴影效果 */
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  
  /* 🎭 悬停效果 */
  transition: all 0.3s ease;
}

.van-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* 📱 导航栏定制 */
.van-nav-bar {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  
  /* 🎨 文字颜色 */
  --van-nav-bar-title-text-color: #ffffff;
  --van-nav-bar-icon-color: #ffffff;
}

🌐 响应式主题

根据屏幕尺寸调整主题：

css

/* 📱 移动端优化 */
@media (max-width: 768px) {
  :root {
    --van-font-size-md: 16px;
    --van-padding-md: 12px;
    --van-radius-md: 6px;
  }
}

/* 💻 桌面端优化 */
@media (min-width: 1024px) {
  :root {
    --van-font-size-md: 14px;
    --van-padding-md: 20px;
    --van-radius-md: 8px;
  }
}

🎯 主题变量动态计算

使用 CSS 函数创建智能主题：

css

:root {
  /* 🎨 基础色相 */
  --base-hue: 210;
  
  /* 🌈 动态生成色彩 */
  --van-primary-color: hsl(var(--base-hue), 100%, 50%);
  --van-primary-color-dark: hsl(var(--base-hue), 100%, 40%);
  --van-primary-color-light: hsl(var(--base-hue), 100%, 70%);
  
  /* 📐 动态尺寸 */
  --scale-factor: 1;
  --van-font-size-md: calc(14px * var(--scale-factor));
  --van-padding-md: calc(16px * var(--scale-factor));
}

/* 🔧 JavaScript 控制 */
/* 
document.documentElement.style.setProperty('--base-hue', '120'); // 绿色主题
document.documentElement.style.setProperty('--scale-factor', '1.2'); // 放大 20%
*/

📚 完整变量列表

🎨 颜色变量

css

:root {
  /* 主色系 */
  --van-primary-color: #1989fa;
  --van-success-color: #07c160;
  --van-warning-color: #ff976a;
  --van-danger-color: #ee0a24;
  --van-info-color: #1989fa;
  
  /* 文字颜色 */
  --van-text-color: #323233;
  --van-text-color-2: #646566;
  --van-text-color-3: #969799;
  --van-text-link-color: #576b95;
  
  /* 边框颜色 */
  --van-border-color: #ebedf0;
  --van-active-color: #f2f3f5;
  --van-active-opacity: 0.6;
  
  /* 背景颜色 */
  --van-background: #f7f8fa;
  --van-background-2: #fafafa;
}

📐 尺寸变量

css

:root {
  /* 字体大小 */
  --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-font-bold: 600;
  
  /* 行高 */
  --van-line-height-xs: 14px;
  --van-line-height-sm: 18px;
  --van-line-height-md: 20px;
  --van-line-height-lg: 22px;
  
  /* 间距 */
  --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-radius-sm: 2px;
  --van-radius-md: 4px;
  --van-radius-lg: 8px;
  --van-radius-max: 999px;
}

🔧 构建工具集成

📦 Webpack 配置

javascript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  // 🎨 在构建时注入主题变量
                  'primary-color': '#1890ff',
                  'success-color': '#52c41a',
                  'warning-color': '#faad14',
                  'error-color': '#f5222d',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

⚡ Vite 配置

javascript

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 🎨 Vite 中的主题变量配置
          'primary-color': '#1890ff',
          'success-color': '#52c41a',
        },
        javascriptEnabled: true,
      },
    },
  },
});

🎯 最佳实践

✅ 推荐做法

🎨 保持色彩一致性

css

/* ✅ 好的做法：使用语义化的颜色 */
--van-primary-color: #1989fa;
--van-primary-color-dark: #0960bd;
--van-primary-color-light: #73b3fa;

📐 遵循设计规范

css

/* ✅ 好的做法：使用 8px 网格系统 */
--van-padding-sm: 8px;
--van-padding-md: 16px;
--van-padding-lg: 24px;

🔄 支持主题切换

css

/* ✅ 好的做法：为深色模式准备变量 */
.van-theme-dark {
  --van-text-color: #ffffff;
  --van-background: #000000;
}

❌ 避免的做法

🚫 硬编码颜色值

css

/* ❌ 不好的做法 */
.my-button {
  background-color: #1989fa; /* 应该使用变量 */
}

/* ✅ 正确的做法 */
.my-button {
  background-color: var(--van-primary-color);
}

🚫 过度定制

css

/* ❌ 不好的做法：改变太多变量 */
:root {
  --van-font-size-xs: 15px; /* 破坏了尺寸体系 */
  --van-padding-sm: 13px;   /* 不符合 8px 网格 */
}

🛠️ 调试工具

🔍 主题变量查看器

创建一个简单的工具来查看当前主题变量：

javascript

// 主题调试工具
function showThemeVariables() {
  const root = document.documentElement;
  const computedStyle = getComputedStyle(root);
  
  const themeVars = [
    '--van-primary-color',
    '--van-success-color',
    '--van-warning-color',
    '--van-danger-color',
    '--van-text-color',
    '--van-background',
  ];
  
  console.log('🎨 当前主题变量：');
  themeVars.forEach(varName => {
    const value = computedStyle.getPropertyValue(varName);
    console.log(`${varName}: ${value}`);
  });
}

// 在控制台中调用
showThemeVariables();

🎨 实时主题编辑器

html

<!-- 简单的主题编辑器 -->
<div class="theme-editor">
  <h3>🎨 实时主题编辑器</h3>
  
  <label>
    主色调：
    <input type="color" id="primary-color" value="#1989fa">
  </label>
  
  <label>
    成功色：
    <input type="color" id="success-color" value="#07c160">
  </label>
  
  <label>
    警告色：
    <input type="color" id="warning-color" value="#ff976a">
  </label>
</div>

<script>
document.getElementById('primary-color').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--van-primary-color', e.target.value);
});

document.getElementById('success-color').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--van-success-color', e.target.value);
});

document.getElementById('warning-color').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--van-warning-color', e.target.value);
});
</script>

🎉 总结

通过 Vant 的主题定制功能，你可以：

🎨 轻松定制 - 通过 CSS 变量快速调整主题
🌙 深色模式 - 内置完整的深色模式支持
🔄 动态切换 - 运行时动态切换主题
📱 响应式 - 适配不同屏幕尺寸
🛠️ 工具友好 - 与各种构建工具无缝集成

现在就开始打造属于你的独特主题吧！让你的应用在众多产品中脱颖而出！

📚 相关内容

🎨 设计与样式

设计资源 - 获取 Sketch 和 Axure 设计资源
样式指南 - 了解 Vant 的样式规范
CSS 变量 - 完整的 CSS 变量列表
深色模式 - 深色模式实现指南

🔧 高级功能

按需引入 - 优化包体积
国际化 - 多语言支持
自定义组件 - 创建自定义组件
插件开发 - 开发 Vant 插件

🛠️ 开发工具

构建配置 - 各种构建工具配置
开发环境 - 本地开发环境搭建
调试技巧 - 主题调试方法
性能优化 - 主题性能优化

💡 实践案例

企业级应用 - 企业级主题定制案例
移动端适配 - 移动端主题适配
多品牌支持 - 多品牌主题切换
设计系统 - 构建完整设计系统

📚 相关文档

🎨 样式与设计

样式指南 - Vant 样式规范和最佳实践
设计指南 - 设计原则和视觉规范
ConfigProvider 全局配置 - 全局主题配置组件

🚀 快速开始

快速上手 - 项目初始化和基础配置
高级用法 - 进阶使用技巧
常见问题 - 主题相关常见问题解答

🔧 开发工具

国际化 - 多语言主题适配
懒加载 - 性能优化相关
迁移指南 V3→V4 - 版本升级主题适配
迁移指南 V2→V3 - 历史版本迁移

🎯 组件定制

Button 按钮 - 按钮组件主题定制
Icon 图标 - 图标主题和自定义图标
NavBar 导航栏 - 导航栏主题定制
Tabbar 标签栏 - 底部标签栏主题
Dialog 弹窗 - 弹窗组件主题定制
Toast 轻提示 - 提示组件主题定制
Loading 加载 - 加载组件主题定制

🎨 视觉组件

Badge 徽标 - 徽标组件主题定制
Tag 标签 - 标签组件主题定制
Progress 进度条 - 进度条主题定制
Circle 环形进度条 - 环形进度条主题
Divider 分割线 - 分割线主题定制
Empty 空状态 - 空状态页面主题

🔄 动效与交互

Transition 动画 - 动画效果主题定制
Overlay 遮罩层 - 遮罩层主题定制
PullRefresh 下拉刷新 - 下拉刷新主题
Swipe 轮播 - 轮播组件主题定制

🛠️ Composables API

vant/use 介绍 - Composables API 概览
useWindowSize - 窗口尺寸响应式主题
useToggle - 主题切换状态管理
useEventListener - 事件监听工具

📱 移动端适配

Watermark 水印 - 水印组件主题定制
FloatingBubble 浮动气泡 - 浮动组件主题
FloatingPanel 浮动面板 - 浮动面板主题
BackTop 回到顶部 - 回到顶部按钮主题

📋 表单组件

Form 表单 - 表单组件主题定制
Field 输入框 - 输入框主题定制
Picker 选择器 - 选择器主题定制
DatePicker 日期选择 - 日期选择器主题
Switch 开关 - 开关组件主题定制
Checkbox 复选框 - 复选框主题定制
Radio 单选框 - 单选框主题定制

📖 更新日志

更新日志 - 主题相关功能更新记录
V4 发布说明 - V4 版本主题新特性
贡献指南 - 参与主题功能开发

🎨 主题定制 - 打造独一无二的 Vant 风格 ​

🌈 欢迎来到主题定制的世界！ ​

⚡ 快速上手 ​

🎯 方法一：CSS 变量覆盖（推荐） ​

🎨 方法二：Less/Sass 变量定制 ​

🌟 核心主题变量 ​

🎨 色彩系统 ​

📐 尺寸系统 ​

🌫️ 灰度系统 ​

🌙 深色模式 ​

🔧 启用深色模式 ​

🎨 深色模式变量 ​

🔄 动态切换主题 ​

🎨 实际应用场景 ​

🏢 企业品牌定制 ​

🎮 游戏风格主题 ​

🌸 粉色少女风 ​

🛠️ 高级定制技巧 ​

🎨 组件级别定制 ​

🌐 响应式主题 ​

🎯 主题变量动态计算 ​

📚 完整变量列表 ​

🎨 颜色变量 ​

📐 尺寸变量 ​

🔧 构建工具集成 ​

📦 Webpack 配置 ​

⚡ Vite 配置 ​

🎯 最佳实践 ​

✅ 推荐做法 ​

❌ 避免的做法 ​

🛠️ 调试工具 ​

🔍 主题变量查看器 ​

🎨 实时主题编辑器 ​

🎉 总结 ​

📚 相关内容 ​

🎨 设计与样式 ​

🔧 高级功能 ​

🛠️ 开发工具 ​

💡 实践案例 ​

📚 相关文档 ​

🎨 样式与设计 ​

🚀 快速开始 ​

🔧 开发工具 ​

🎯 组件定制 ​

🎨 视觉组件 ​

🔄 动效与交互 ​

🛠️ Composables API ​

📱 移动端适配 ​

📋 表单组件 ​

📖 更新日志 ​

🎨 主题定制 - 打造独一无二的 Vant 风格

🌈 欢迎来到主题定制的世界！

⚡ 快速上手

🎯 方法一：CSS 变量覆盖（推荐）

🎨 方法二：Less/Sass 变量定制

🌟 核心主题变量

🎨 色彩系统

📐 尺寸系统

🌫️ 灰度系统

🌙 深色模式

🔧 启用深色模式

🎨 深色模式变量

🔄 动态切换主题

🎨 实际应用场景

🏢 企业品牌定制

🎮 游戏风格主题

🌸 粉色少女风

🛠️ 高级定制技巧

🎨 组件级别定制

🌐 响应式主题

🎯 主题变量动态计算

📚 完整变量列表

🎨 颜色变量

📐 尺寸变量

🔧 构建工具集成

📦 Webpack 配置

⚡ Vite 配置

🎯 最佳实践

✅ 推荐做法

❌ 避免的做法

🛠️ 调试工具

🔍 主题变量查看器

🎨 实时主题编辑器

🎉 总结

📚 相关内容

🎨 设计与样式

🔧 高级功能

🛠️ 开发工具

💡 实践案例

📚 相关文档

🎨 样式与设计

🚀 快速开始

🔧 开发工具

🎯 组件定制

🎨 视觉组件

🔄 动效与交互

🛠️ Composables API

📱 移动端适配

📋 表单组件

📖 更新日志