分享 5 套 uni-app 实用主题，一键适配暗黑模式

在 uni-app 移动应用开发中，主题系统不仅影响视觉美感，更直接关系到可用性、可访问性和品牌感知。

本文分享 5 套经过实战验证的 uni-app 主题方案，每一套都配备完整的色值源码和暗黑模式适配，可直接应用于你的项目。

微信小程序搜索 uViewPro 可实际体验主题切换效果！

一、5 套实用主题方案

以下是 5 套经过实战验证的主题方案，每一套都包含完整的 TypeScript 配置源码，支持暗黑模式自动适配。

1. 官方蓝：通用平台主题（可信赖）

设计目标：专业、统一、适配广泛场景

设计思路：

• 主色为标准蓝色 #2979ff，兼顾科技感与信赖感
• 背景采用亮灰与白色，信息层次清晰
• 辅助色保持中性色，避免干扰核心交互

应用场景：产品主页、控制台、公告类页面，视觉稳定、易于推广为默认主题。

主题源码：

{
  name: 'blue',
  label: '蓝色主题（官方推荐）',
  description: '清爽蓝色主题，适合大多数应用场景',
  color: {
    primary: '#2979ff',
    error: '#fa3534',
    warning: '#ff9900',
    success: '#19be6b',
    info: '#909399',
    bgColor: '#f3f4f6',
    bgWhite: '#ffffff',
    mainColor: '#303133',
    contentColor: '#606266',
    tipsColor: '#909399',
    borderColor: '#e4e7ed',
    dividerColor: '#ebeef5'
  }
}

2. 霞光紫：创新科技主题（清新紫）

设计目标：年轻、时尚、品牌差异化

设计思路：

• 主色选用明亮紫色 #7c3aed，强调识别度
• 信息色调偏灰、调和色较柔和，避免主色过于抢眼
• 轻量状态色与按钮使用高饱和度紫色，适合强调操作

应用场景：品牌活动页、产品推广页、创意类业务，提升视觉记忆点。

主题源码：

{
  name: 'purple',
  label: '霞光紫（创新科技）',
  description: '明亮紫色主题，适合创意类产品和品牌活动',
  color: {
    primary: '#7c3aed',
    error: '#ef4444',
    warning: '#f59e0b',
    success: '#10b981',
    info: '#6b7280',
    bgColor: '#faf5ff',
    bgWhite: '#ffffff',
    mainColor: '#1f2937',
    contentColor: '#4b5563',
    tipsColor: '#9ca3af',
    borderColor: '#e5e7eb',
    dividerColor: '#f3f4f6'
  }
}

3. 清翠绿：自然健康主题（平衡绿）

设计目标：舒适、自然、信任感

设计思路：

• 主色采用清爽绿色 #059669，传递健康与稳定
• 搭配温和的灰色信息色，减轻视觉压力
• 成功、警告、错误色彩规范，便于状态识别

应用场景：会员、服务、数据展示类页面，增强用户安心感和阅读体验。

主题源码：

{
  name: 'green',
  label: '清翠绿（自然健康）',
  description: '清爽绿色主题，适合健康、环保类应用',
  color: {
    primary: '#059669',
    error: '#dc2626',
    warning: '#d97706',
    success: '#16a34a',
    info: '#6b7280',
    bgColor: '#f0fdf4',
    bgWhite: '#ffffff',
    mainColor: '#111827',
    contentColor: '#374151',
    tipsColor: '#6b7280',
    borderColor: '#d1d5db',
    dividerColor: '#e5e7eb'
  }
}

4. 暖阳橙：电商类主题（亮色橙）

设计目标：高对比、强调转化按钮

设计思路：

• 主色采用高饱和橙色 #ff6b35，提高行动召唤力
• 次级色调保持亮色背景，增强商品内容对比
• 转化按钮、促销标签使用鲜艳橙色，吸引用户点击

应用场景：列表页、商品页、结算页视觉统一，转化按钮突出，适合促销与活动场景。

主题源码：

{
  name: 'orange',
  label: '暖阳橙（电商促销）',
  description: '高饱和橙色主题，适合电商和促销活动',
  color: {
    primary: '#ff6b35',
    error: '#ef4444',
    warning: '#fbbf24',
    success: '#22c55e',
    info: '#6b7280',
    bgColor: '#fff7ed',
    bgWhite: '#ffffff',
    mainColor: '#1c1917',
    contentColor: '#44403c',
    tipsColor: '#78716c',
    borderColor: '#fed7aa',
    dividerColor: '#ffedd5'
  }
}

5. 深邃蓝：企业管理类主题（稳重蓝）

设计目标：低饱和、信息密度高

设计思路：

• 主色选择深蓝 #1e3a8a，兼具专业与沉稳
• 亮色背景配合高对比文本，提升可读性
• 辅助状态色保持稳重，减少视觉噪音

应用场景：信息展示页更易读，数据密集场景下视觉疲劳更小，适合企业类系统。

主题源码：

{
  name: 'darkblue',
  label: '深邃蓝（企业管理）',
  description: '低饱和深蓝主题，适合企业级管理系统',
  color: {
    primary: '#1e3a8a',
    error: '#b91c1c',
    warning: '#a16207',
    success: '#15803d',
    info: '#525252',
    bgColor: '#f8fafc',
    bgWhite: '#ffffff',
    mainColor: '#0f172a',
    contentColor: '#334155',
    tipsColor: '#64748b',
    borderColor: '#cbd5e1',
    dividerColor: '#e2e8f0'
  }
}

二、暗黑模式：自动适配，开箱即用

以上 5 套主题都内置了暗黑模式支持。uView Pro 采用智能暗色生成算法，你只需提供亮色色板，暗色会自动生成。

1. 智能生成暗色原理

系统采用色值混合方案：

• 取用户提供的亮色
• 与预定义的暗色基准混合（加权平均，比例 0.6:0.4）
• 生成视觉层级合理、对比度充足的暗色

这意味着：

• ✅ 任何亮色都能生成合理的暗色
• ✅ 生成的暗色永远符合可读性标准
• ✅ 用户还能手动微调（如果想要）

2. 可手动覆盖暗色

{
  name: 'blue',
  color: {
    primary: '#2979ff',
    bgColor: '#f3f4f6',
    mainColor: '#303133'
  },
  darkColor: {
    // 留空，系统自动生成
    // 或者手动覆盖某个：
    primary: '#6ba1ff'
    // 其他的还是自动生成
  }
}

三、使用方案：三步接入你的项目

需要正常引入 uView Pro 组件库生效，详细引入方式可查看官网文档：快速配置

了解如何配置组件库后，我们可以将主题包引入到项目中：

第一步：引入和注册主题包

在 main.ts 中注册主题包：

import uViewPro from 'uview-pro';
import themes from '@/uview-pro.theme'; // 引入上述 5 套主题配置

app.use(uViewPro, {
  theme: {
    themes: themes,
    defaultTheme: 'blue',
    defaultDarkMode: 'auto',
    isForce: true
  }
});

第二步：使用主题管理 API 切换主题

import { useTheme } from 'uview-pro';

const { setTheme, currentTheme, setDarkMode, darkMode } = useTheme();

// 切换到紫色主题
setTheme('purple');

// 切换暗黑模式
setDarkMode('dark');

// 获取当前状态
console.log(currentTheme.value); // 'purple'
console.log(darkMode.value); // 'dark'

第三步：在页面中使用主题变量

// SCSS 变量方式
.card {
  background-color: $u-bg-white;
  border-color: $u-border-color;
}

// CSS 变量方式
.card {
  background-color: var(--u-bg-white);
  border-color: var(--u-border-color);
}

<!-- 模板行内样式 -->
<view :style="{ color: $u.color.primary }">按钮</view>
<view :style="{ backgroundColor: `var(--u-type-primary)` }" />

四、快速生成你的专属主题

如果你觉得上述 5 套主题还不够，uView Pro 提供了可视化主题生成工具，让你 3 分钟内生成专属主题：

1. 选定主色：选择 primary、success、warning、error、info
2. 智能生成：一键生成颜色阶梯值（深色、禁用、浅色）
3. 实时预览：修改颜色的同时，看到按钮、卡片、背景的实时变化
4. 批量导出 ：配置多套主题，一次性导出 uview-pro.theme.ts

工具链接：uView Pro 多主题生成工具

五、小技巧总结

• 快速生成主题 ：使用 uView Pro 主题配置工具，3 分钟内可视化生成主题包，无需手动编写配置
• 暗黑模式优先 ：设置 defaultDarkMode: 'auto'，让应用自动适配用户系统主题，提升用户体验
• 变量优先 ：在组件样式中始终使用语义变量（如 --u-type-primary），而非硬编码颜色值，确保切换时样式一致
• 批量配置 ：如果有多个客户主题，可以在 themes 数组中批量定义，运行时动态切换，适合 SaaS 应用
• 新项目可直接使用 uView Pro Starter，已经集成好了 5 套主题

六、常见问题

Q1：主题切换不生效，主题色值不生效怎么办？

原因分析： 未使用 u-config-provider 组件进行全局主题注入。

解决方案：

1. 添加全局配置组件

在应用根布局（注意： App.vue 非根组件，使用无效）中包裹 u-config-provider：

<template>
 <u-config-provider>
   <!-- 你的页面内容 -->
 </u-config-provider>
</template>

如何作为根组件使用可参考这篇文章：mp.weixin.qq.com/s/pkAZ96qIT...

2. 平台差异注意

• H5 平台 ：可不使用 u-config-provider
• 小程序/App ：必须使用 u-config-provider，否则主题切换无效

Q2：如何设置默认主题并强制生效？

场景说明：

• 首次运行：程序会将 defaultTheme 保存到 localStorage，实现持久化
• 用户切换：自动更新 localStorage 中的主题设置
• 强制重置：需要覆盖用户的主题选择

配置方法：

// main.ts
app.use(uViewPro, {
  theme: {
    themes: themes,
    defaultTheme: 'blue',    // 设置默认主题
    isForce: true            // 强制生效（覆盖用户设置）
  }
});

其他方式：

• 清除缓存：删除 localStorage 中的主题配置，重新进入页面
• 动态切换：使用 setTheme() API 在运行时切换

七、总结

本文分享的 5 套主题方案覆盖了通用平台、创新科技、自然健康、电商销售、企业管理五大应用场景，每一套都配备完整的源码和暗黑模式支持。你可以直接复制使用，也可以基于它们进行修改，快速构建属于自己的主题系统。

相关资源

• 📖 官方文档 ：uviewpro.cn/
• ⭐ Star支持我 ：github.com/anyup/uView...