企业内部开发 附录 深色模式适配指南
深色模式适配指南

企业微信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查找对应设计元素的色值。

相关资源:

企业微信应用深色模式配色板sketch

企业微信应用深色模式色值表html

色值表需要设计侧和前端开发,共同订立且规范化。在设计过程中,界面中所有元素使用已规范的色值。前端开发通过「查找色值并自动填入色值」的工具插件进行着色处理,即可实现「浅色模式」和「深色模式」,无需单独制作两份不同颜色的设计图。

以下将列出典型界面的色值标注,供服务商设计团队参考:

工作台

色值标注:
实际效果:

客户联系

色值标注:
实际效果:

通讯录

色值标注:
实际效果:

审批

色值标注:
实际效果:

添加应用

色值标注:
实际效果:

上一篇
与企业号接口差异