WebToApp外观与主题深色模式、状态栏PAGE_TOP取色与导航栏自定义全解【免费下载链接】web-to-appThe most full featured web-to-app toolkit on Android, a complete APK workshop that runs entirely on your phone项目地址: https://gitcode.com/GitHub_Trending/web/web-to-appWebToApp 是一款完全运行在 Android 手机上的网页变 App工具包除了打包能力它的外观与主题系统同样强大构建器支持深色模式一键切换导出的应用可独立配置亮/暗主题状态栏还能通过PAGE_TOP 跟随页面取色、自定义颜色与图片背景、调节高度与透明度导航栏也可在全屏模式下按需显示。本文带你完整掌握这些界面定制技巧。 深色模式跟随系统、常亮、常暗三选一WebToApp 的深色模式由 ThemeManager.kt 管理底层提供三个模式模式说明SYSTEM跟随系统深浅色设置默认LIGHT始终浅色DARK始终深色️构建器 UI在「我的应用」页面顶栏点击月亮/太阳按钮即可在深色与浅色之间切换切换时会播放一圈主题揭示动画选择会自动持久化下次启动恢复。导出的应用每个应用拥有独立的主题设置亮/暗/跟随系统在应用的「编辑通用配置」中按应用单独配置不受构建器主题影响。详细说明见官方文档docs/zh/guide/main-screen/dark-light.md。 状态栏 PAGE_TOP 取色让状态栏随页面变色在「编辑通用配置 → 全屏模式 → 自定义状态栏」中你可以为状态栏选择四种颜色模式定义于 StatusBarConfigCard.kt颜色模式效果透明状态栏完全透明网页内容向上延伸主题色跟随 App 主题表面色跟随页首PAGE_TOP实时提取页面顶部区域的主色作为状态栏背景自定义色打开调色盘任选任意颜色十六进制PAGE_TOP 取色是最智能的模式当你浏览不同网页时状态栏会自动染上页面头部的颜色视觉过渡自然统一。卡片内还提供实时预览框拖动滑块即可预览高度、颜色、透明度的最终效果无需导出试错。 状态栏高度与背景图片自定义除了颜色状态栏还能塑形高度调节0–48dp 滑块自由调整状态栏高度一键恢复默认回到系统高度。图片背景背景类型可从纯色切换为图片选择本地图片后自动裁剪到状态栏比例。透明度滑块0%–100% 控制背景不透明度打造半透明玻璃质感。状态栏图标着色自动/深色/浅色三态避免深色背景下图标看不清的尴尬。这些配置字段含暗色主题专属的一套都定义在 WebApp.kt 中亮色/暗色两个标签页可以分别设置实现白天一套、夜晚一套的状态栏外观。 导航栏自定义与全屏配合导航栏底部操作条的显示与否在全屏模式卡片中配置全屏显示导航栏沉浸式全屏时仍保留底部导航栏方便返回操作。全屏常驻状态栏顶部状态栏持续可见永不自动隐藏。视频 HTML5 全屏时状态栏会默认强制隐藏避免遮挡画面。更多外观入口浏览器工具栏、屏幕方向、保持常亮、悬浮窗等汇总在 docs/zh/guide/config/appearance.md状态栏配置详解见 docs/zh/guide/app-actions/edit-common-config/fullscreen.md。 相关源码与文档路径深色模式管理ThemeManager.kt状态栏配置卡片StatusBarConfigCard.kt外观配置字段模型WebApp.kt外观文档索引docs/zh/guide/config/appearance.md深色模式文档docs/zh/guide/main-screen/dark-light.md掌握深色模式切换、PAGE_TOP 页面取色和导航栏自定义之后你的应用就能拥有媲美原生 App 的精致外观了。【免费下载链接】web-to-appThe most full featured web-to-app toolkit on Android, a complete APK workshop that runs entirely on your phone项目地址: https://gitcode.com/GitHub_Trending/web/web-to-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考