讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app深色模式适配 uni-app如何实现dark mode

夜宇小哥_4171

夜宇小哥_4171

发布时间:2026-04-20 21:56:42

|

875人浏览过

|

来源于php中文网

原创

uni-app深色模式需theme.json与manifest.json严格对齐:manifest.json各平台节点须显式配置"darkmode":true和"themeLocation":"theme.json",theme.json须置于根目录且变量名仅限light/dark,pages.json仅支持特定全局样式字段引用@变量,组件内联样式不生效,需用CSS变量或class切换,微信小程序tabBar.borderStyle仅支持black/white字符串,手动切换主题需强制重绘页面,鸿蒙和安卓nvue有特殊适配要求。

uni-app深色模式适配 uni-app如何实现dark mode

theme.json 配置必须和 manifest.json 对齐,否则深色模式不生效

uni-app 的深色模式不是靠 CSS 媒体查询自动触发的,而是依赖平台层识别 theme.json 并注入对应变量——如果配置没对上,iOS、鸿蒙、H5 甚至微信小程序都会静默失败,界面毫无变化。

  • manifest.json 中必须在各平台节点(如 app-plus、app-harmony、mp-weixin)显式写入 "darkmode": true 和 "themeLocation": "theme.json",不能只写一个平台
  • theme.json 必须放在项目根目录,路径大小写敏感;若放错位置(比如在 static/ 下),HBuilder X 4.83+ 会直接忽略,控制台也不报错
  • 变量名只能是 light 和 dark 两级,不能自定义成 night 或 midnight,否则 pages.json 里 @navBgColor 这类引用会 fallback 到空值

pages.json 中的颜色变量仅限全局样式字段,不能用于组件内联样式

很多人以为写了 @bgColor 就能在所有地方用,结果在 <view style="background-color: @bgColor"></view> 里失效——这是设计限制,不是 bug。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 支持 @xxx 的字段只有:navigationBarBackgroundColor、navigationBarTextStyle、backgroundColor、tabBar 下的 color/selectedColor/backgroundColor/borderStyle
  • 组件内部颜色必须用 CSS 变量方案(:root + [data-theme="dark"])或 class 切换,不能依赖 theme.json 注入
  • 微信小程序中 tabBar.borderStyle 只接受 "black" 或 "white" 字符串,哪怕 theme.json 里写成 "#ffffff" 也会被截断为 "white"

手动切换主题时,必须主动触发页面重绘,否则样式卡在旧状态

用 switch 控件调用 uni.setStorageSync('theme', 'dark') 很容易,但如果不通知当前页面更新,pages.json 里定义的导航栏颜色根本不会变——因为 pages.json 是编译期注入,运行时改本地存储不影响已渲染的 DOM。

  • 推荐做法:在 App.vue 的 onLaunch 和 onShow 中读取主题,然后调用 uni.reLaunch({ url: '/pages/index/index' }) 强制刷新(轻量页可用 uni.$emit + watch 监听)
  • 监听系统变化要用 uni.matchMedia('(prefers-color-scheme: dark)'),不是 window.matchMedia,后者在 App 端不可靠
  • 安卓端 nvue 页面不支持 data-theme 类名切换,得用 style 绑定或 v-if/v-else 分开写两套结构

uni-ui 组件默认不响应深色模式,必须逐个打补丁

像 uni-number-box、uni-datetime-picker 这类组件大量使用内联样式,@media (prefers-color-scheme: dark) 在它们内部基本无效,得手动覆盖。

  • 最稳妥方式:在 uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue 的 <style></style> 块末尾加 @media (prefers-color-scheme: dark) { ... },并给关键属性加 !important
  • 不要只改 App.vue 全局样式,因为 uni-ui 组件的 scoped style 会隔离掉外部规则
  • 图标类组件(如 tabbar icon)必须准备两套图:浅色用 icon.png,深色用 icon-dark.png,并在 pages.json 中根据主题动态指定 iconPath 和 selectedIconPath
实际项目里最容易漏的是鸿蒙平台的 safearea.bottom.offset 配置和安卓 nvue 的 class 切换逻辑——这两处不处理,tabbar 会在深色模式下错位或文字看不见,而且问题只出现在真机,模拟器完全不复现。

热门AI工具

更多
PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2823

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

6143

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

7070

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6878

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

983

2024.05.22

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

0

2026.11.03

Docker Desktop镜像构建教程
Docker Desktop镜像构建教程

想使用Docker Desktop将本地项目构建成Docker镜像?本专题围绕镜像构建的实际操作展开,介绍Dockerfile编写、构建命令使用、镜像标签设置和构建日志查看等内容,同时整理镜像无法生成、依赖安装失败及构建缓存异常等问题的排查思路。

0

2026.11.03

Docker Desktop容器创建指南
Docker Desktop容器创建指南

本专题聚焦Docker Desktop容器创建与运行配置,介绍通过本地镜像或远程镜像创建容器的方法,以及容器启动、终端访问、日志查看和基础管理等操作。针对端口冲突、参数配置不当、容器无法启动等情况,也整理了相应的排查方向。

0

2026.11.03

Tailwind CSS 如何制作导航栏和卡片
Tailwind CSS 如何制作导航栏和卡片

用 Tailwind CSS 制作导航栏和卡片,可先搭建语义化结构,再组合 Flex、Grid、间距、圆角与阴影类。这里整理横向导航、移动端菜单、卡片网格及悬停效果的相关文章,帮助你把常见页面组件做得清晰且适配不同屏幕。

0

2026.11.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn