企业微信iOS、Android客户端在 3.1.8版本开始支持深色模式，企业微信团队整理了深色模式的适配指南，服务商可参考指南对应用进行适配，以提升用户的整体使用体验。
1 什么是深色模式
深色模式，即「Dark Mode」。2018 年苹果在 macOS 10.14 上加入了深色模式，Android 系的厂商也陆续加入支持，Google 在 Android P 当中也正式推出了自己的深色模式，2019 年在 WWDC 大会上 iOS 13 正式引入深色模式。
深色模式可以显著降低屏幕的整体视觉亮度，减少眼睛的视觉压力。在深色模式下，所有的界面元素都退居幕后，使得我们真正与之交互和操作的内容可以被凸显出来。同时随着 OLED 屏幕的普及，支持深色模式更有了一定的现实意义：省电。由于 OLED 屏幕中每个像素都是自主发光而非 LCD 由整个一块背光面板发光，所以在显示深色元素时像素所消耗的电流更低，在纯黑色下像素点可以完全关闭达到省电的效果。
如今深色模式已经成为大势所趋。
2 如何识别深色模式
企业微信 iOS、Android 客户端 3.1.8 版本开始支持深色模式。开发者可以通过 CSS 媒体查询 prefers-color-scheme: dark 来识别并对深色模式进行样式兼容。
@media (prefers-color-scheme: dark) {
/* Dark Mode Styles */
}Android 企业微信客户端暂不支持媒体查询，开发者可以改用 User-Agent 进行判断。
if (/ColorScheme\/Dark/i.test(navigator.userAgent)) {
/* Dark Mode Logic */
}为保证页面内样式一致，建议开发者在 body 元素中加上自定义属性统一控制页面样式。
<body data-color-mode="dark">3 企业微信深色模式适配实践
企业微信提供的颜色表中，配有「浅色模式」及对应的「深色模式」色值，可根据color_name查找对应设计元素的色值。
相关资源：
色值表需要设计侧和前端开发，共同订立且规范化。在设计过程中，界面中所有元素使用已规范的色值。前端开发通过「查找色值并自动填入色值」的工具插件进行着色处理，即可实现「浅色模式」和「深色模式」，无需单独制作两份不同颜色的设计图。
以下将列出典型界面的色值标注，供服务商设计团队参考：
工作台
色值标注：实际效果：
客户联系
色值标注：实际效果：
通讯录
色值标注：实际效果：
审批
色值标注：实际效果：
添加应用
色值标注：实际效果：
- 深色模式适配指南
