咱们先从一个生活中的场景说起。晚上关了灯，你躺在床上打开手机，如果屏幕突然跳出一个纯白的界面，那感觉就像有人拿手电筒直接照你眼睛，非常刺眼。深色模式就是为了解决这个问题而生的。
它通过降低屏幕亮度、减少白色元素、采用深色背景来达到几个目的：
减少眼睛疲劳：在低光环境下，深色背景能有效降低屏幕发出的光强，让眼睛更舒服。
延长电池续航：对于OLED或AMOLED屏幕的手机，显示黑色像素时几乎不耗电。
提升视觉层次：好的深色设计能让内容更突出，操作更聚焦。
符合用户习惯：现在主流操作系统都支持系统级深色模式，用户已经养成了使用习惯。
简单来说，如果你的小程序不支持深色模式，当用户手机切换到深色主题时，你的小程序就可能变成一个“光污染源”，体验会很糟糕。
开发深色模式不是简单地把白色变成黑色就完事了，它更像是在给你的小程序准备“两套衣服”——一套适合白天穿（浅色主题），一套适合晚上穿（深色主题）。系统会根据用户手机的设置，自动帮你“换衣服”。
小程序框架提供了获取系统主题设置的能力。核心步骤是：
监听系统变化：你可以设置小程序监听手机系统的主题变化。当用户在手机设置里把外观从“浅色”切换到“深色”时，你的小程序能立刻知道这个变化。
应用对应的样式：知道了当前该穿哪套“衣服”后，就要把对应的颜色样式应用到界面上。
提供手动开关（可选但推荐）：除了跟随系统，最好在设置里给用户一个手动选择“始终浅色/始终深色/跟随系统”的选项，把控制权交给用户。
虽然开发原理相通，但在实际设计中，我们需要考虑不同操作系统的设计规范，让用户感觉你的小程序是“原生”的，而不是别扭的“外来客”。
不要纯黑（#000000）：在深色背景下使用纯黑作为大面积背景，反而会与明亮的文字和元素形成过强对比，造成视觉疲劳。建议使用深灰色，比如 #121212 或 #1E1E1E，它们能提供更好的视觉深度和层次感。
调整颜色对比度：确保文本、图标与背景的对比度足够高，让用户能轻松阅读。但也要避免“黑白分明”的极端对比。浅色文字在深灰背景上，通常比白色背景上需要稍微降低一点不透明度（例如，将纯白文字从100%不透明度降到87%或60%），看起来会更柔和。
重新审视所有颜色：浅色主题下好看的颜色，直接搬到深色主题下可能会变得刺眼或难以辨认。特别是品牌色、按钮颜色、警示色等，需要为深色模式准备一个“降噪”版本。比如，把亮蓝色调整为饱和度稍低的蓝色。
注意图片和媒体：
背景透明的图标：要准备两套颜色，浅色下用深色图标，深色下用浅色图标。
带背景的图片：如果图片本身是浅色背景，在深色模式下会非常突兀。可以考虑给图片添加一个深色的半透明遮罩层，或者当检测到深色模式时，替换为深色背景版本的图片。
视频：确保播放器的控件颜色也能适配深色。
利用“层次”和“高程”：通过微妙的亮度差异来表现界面元素的层次关系。比如，卡片的背景可以是 #1E1E1E，而页面背景用 #121212，这样卡片就像“浮”在页面上一样。
系统A（以扁平、鲜明为特点的系统）的设计建议：
色彩体系：该系统在深色模式下偏好使用有轻微色彩倾向的灰色作为背景，而不是中性灰。它的材料设计规范非常成熟，建议直接参考其推荐的深色主题色板，例如将表面色（Surface）和背景色（Background）区分开。
组件样式：注意该系统深色模式下按钮、输入框等组件的默认样式。如果小程序使用了自定义组件，应尽量在视觉逻辑上与其原生组件保持一致，例如输入框的边框颜色、激活状态等。
图标与语义：该系统有一套清晰的语义化颜色系统（如成功用绿色，警告用黄色，错误用红色）。在深色模式下，这些语义色需要调整亮度或饱和度以确保可访问性，但语义本身不能变。
系统B（以圆润、动态为特点的系统）的设计建议：
模糊与透明度：该系统在深色模式下非常善于利用毛玻璃（背景模糊）效果和透明度来构建层次。在设计顶部导航栏、底部标签栏或模态窗口时，可以考虑使用半透明背景加模糊的效果，这能让界面看起来更现代、更融入系统。
鲜艳色彩的点缀：该系统鼓励在深色背景下使用更鲜艳、饱和度更高的颜色作为强调色。你的品牌色如果比较鲜艳，在这里可以更大胆地使用。
动态效果：注意该系统深色模式下动画和转场的流畅性。确保你的小程序在主题切换时（如果有过渡动画）以及页面跳转时的体验是顺滑的。
核心要点：不要重新发明轮子。多打开你手机系统自带的应用（如设置、日历、邮件），在深色模式下仔细观察它们是怎么处理颜色、间距、阴影（或模糊）的。让你的小程序向系统原生应用的观感靠拢，是提升用户体验最有效的捷径。
规划与定义颜色变量：
不要在任何样式里直接写 color: #333333; 这样的“硬编码”。
在全局样式文件（如 app.wxss）或使用 CSS 变量，定义两套颜色主题变量。
例如：
css
/* 浅色主题变量 */:root {
--bg-color: #FFFFFF;
--text-primary: #212121;
--brand-color: #007AFF;}/* 深色主题变量 */:root[data-theme='dark'] {
--bg-color: #121212;
--text-primary: rgba(255, 255, 255, 0.87);
--brand-color: #5AC8FA; /* 调整为更适合深色的品牌色 */}
然后在所有样式规则中，使用这些变量：color: var(--text-primary); background: var(--bg-color);
获取并应用系统主题：
在小程序入口文件（app.js）的 onLaunch 或 onShow 生命周期中，使用小程序API获取系统当前的主题设置。
根据获取到的主题值（如 'dark' 或 'light'），通过 wx.setStorageSync 存储，并通过修改页面的 data-theme 属性或动态添加类名的方式，将主题状态应用到整个小程序。
监听系统变化：
使用小程序API监听系统主题变化事件。一旦用户切换了系统主题，这个事件会被触发，你需要在回调函数里更新小程序内部存储的主题状态，并重新应用样式。
逐页面检查与适配：
开启手机的系统深色模式，从首页开始，一页一页地浏览你的小程序。
检查所有文字是否清晰可见。
检查所有按钮、图标、边框、阴影是否协调。
检查所有自定义的图片、背景图是否合适。
将发现的问题记录下来，并回到第1步，调整你的颜色变量或特定页面的样式。
测试与反馈：
在不同型号、不同操作系统的手机上进行真机测试。
特别注意在弱光环境下的实际观感。
如果可能，收集少量用户的反馈，看是否有刺眼、看不清的地方。
开发深色模式，本质是从“如何把界面做亮”的思路，切换到“如何在低亮度下让信息清晰又舒适”的思路。它不是一个可有无可的炫技功能，而是现代应用基础体验的一部分。
记住最核心的三点：
颜色用变量，别写死：这是实现可切换主题的技术基础。
向系统设计看齐：遵循用户所在操作系统的设计语言，能让你的小程序感觉更“原生”、更高级。
为舒适而设计，不为黑暗而设计：目标是减少视觉压力，提升可读性，创造一种宁静、专注的浏览体验。
做好深色模式，就像是为你小程序的用户准备了一副舒适的“夜间眼镜”。当别人家的应用在夜晚还散发着刺眼白光时，你的应用已经体贴地调低了亮度，用户自然会觉得更贴心、更专业，也更愿意在夜间打开它。这个过程需要耐心和细心，但这份投入对于提升用户体验来说，绝对是值得的。
联系电话