通过向喜欢在设备上使用深色模式的用户显示深色主题，Terra 的跳出率降低了 60%，每次会话的浏览页数增加了 170%。
Terra 是巴西最大的媒体公司之一，月活用户达 7500 万。通过提供自定义深色主题，对于偏爱深色模式的用户，Terra 将桌面设备上的跳出率降低了 60%，并将每次会话浏览的页数提高了 170%。
在本文中，我们将分析 Terra 的整个历程，从确定“深色模式”同类群组的规模，到应用自定义深色主题，最后衡量此实现对其主要 KPI 的影响。
60%
跳出率降幅
170%
每次会话浏览页数更多
什么是深色模式？
过去，设备中的界面以“浅色模式”显示，这通常意味着在浅色界面上显示黑色文本。您也可以选择“深色模式”，在深色背景上使用浅色文字，例如灰色或黑色。
深色模式可改善用户体验。有些人出于美观或无障碍原因而喜欢使用它。它还有其他优势，例如延长设备电池续航时间。用户可以通过设备中的设置表明他们更喜欢深色模式，具体取决于操作系统。例如，以下屏幕截图显示了搭载 Android Q 的设备中的深色主题配置选项：
为了向喜欢“深色模式”的用户提供更好的体验，您可以使用 prefers-color-scheme 媒体查询，并将其值设为 light 或 dark。此媒体查询反映了用户在设备中的选择。然后，您可以为偏爱深色的用户加载自定义深色主题。例如，加载“深色”CSS 文件并更改字体和背景颜色等值。以下代码展示了相关示例：
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
确定“更喜欢浅色”和“深色”用户同类群组
在撰写本文时（2021 年 12 月），Chrome 平台状态确定大约 22% 的网络流量来自采用“首选深色”设置的用户。
这些是汇总数据，因此在访问网站时，更喜欢深色系的用户的实际比例可能有所不同。因此，要了解该群体的规模，建议您进行内部衡量。
以下代码会创建一个分析维度，以衡量相较于 dark，更喜欢 light 的用户的效果：
function getColorScheme() {
let colorScheme = 'Unknown';
if (window.matchMedia) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
colorScheme = 'Dark';
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
colorScheme = 'Light';
}
}
return colorScheme;
}
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date; ga('create', 'UA-ID', 'auto');
ga('set', 'color-scheme-preference', getColorScheme());
ga('send', 'pageview');
Terra 在其网站中实施了此代码，并比较了两组在移动设备 (Android) 和桌面设备 (Windows) 中的行为。此时，Terra 没有提供自定义深色主题，因此此实验的目标为：
- 确定偏好深色的用户群组的规模。
- 识别模式：例如，相较于偏爱光明的用户，偏爱深色的用户是否更快地离开网站？
了解这一点有助于做出更明智的决策，例如：在必要时提供自定义深色主题。 以下是 Terra 在测试 14 天后获得的结果：
移动设备 (Android)
就移动设备 (Android) 而言，跳出率和每次会话浏览页数的用户与更喜欢“浅色”的用户相比，并没有明显的差异：
桌面设备 (Windows)
就桌面设备 (Windows) 而言，首选“深色”的用户群体在网站上停留的时间要少得多：与偏爱“浅色”的用户相比，他们的跳出率几乎翻了一番，浏览了一半以上的网页：
根据这些数据，Terra 假设由于其网站中缺乏对深色主题的支持，偏爱“深色”的用户在桌面设备上停留的时间较少。
接下来，Terra 决定制定一个“深色主题”策略，看看能否提高偏爱深色的用户群的互动度。
实现深色主题
大多数网站都使用之前介绍的简单策略（即通过 prefers-color-scheme 媒体查询监听用户的配置更改，并根据此信息更改样式）来实现深色主题。
Terra 决定让用户拥有更大的控制权：当用户检测到设备中已开启“首选深色”设置（通过媒体查询）时，系统会向用户显示提示，询问他们是否要在“夜间模式”下导航。只要用户不拒绝提示（通过点击“忽略”按钮），系统就会遵循用户的操作系统设置，并应用自定义的深色主题：
作为此策略的补充，它们在“设置”屏幕中提供了额外的配置选项，用户可以在其中决定是明确选择“浅色”“深色”，还是想依赖底层设备设置。
Terra 的“夜间模式”如下所示：
衡量 Terra 深色主题的影响
为了衡量深色主题的影响，Terra 将设备上已开启“Prefer Dark”设置的用户纳入考量，并比较了分别显示“Light”和“DarK”主题时的互动指标。 以下是在移动设备 (Android) 和桌面设备 (Windows) 上的搜索结果：
移动设备 (Android)
虽然跳出率保持不变，但当用户暴露在深色主题下时，网页浏览量和会话数几乎翻了一番（从 2.47 增加到 5.24）：
2X
每次会话浏览页数更多
桌面设备 (Windows)
显示深色主题后，这两项指标都有改善：跳出率从 27.25% 下降到 10.82%，每次会话浏览页数几乎翻了一番（从 3.7 提高到 9.99）。
60%
跳出率降幅
170%
每次会话浏览页数更多
根据这些数据，Terra 可以确认实施深色主题可为用户带来哪些好处，并决定继续将其作为网站的核心功能。
总结
用户可以在设备上开启深色模式，将屏幕样式更改为深色主题。据报道，这种方法不仅可以改善用户体验，还可以为用户设备的不同方面带来好处，例如节省电池电量。
在本文中，我们了解了提供自定义深色主题如何针对在设备上开启了首选深色模式设置的 Terra 用户群组提高互动指标。
如果公司有资源实现替代深色主题，则建议采用此方法。对于没有时间投入开发此类功能的用户，Chrome 将开始推出自动深色模式功能。