来源：彩云译设计（caiyunyisheji）
以一个 app 改版案例，深入浅出地告诉大家如何适配深色模式，同时给出了正确和错误的示范，相信对于目前流行的深色设计趋势来说，是非常的实用了。
Google 在 2019 年度 I/O开发者大会上宣布，安卓将会从系统底层支持深色模式。同时，我们也会看到更多支持深色 UI 的应用正在推出。
深色 UI 很快将成为一种常见的模式，其他应用也很快会遵循这一模式。
在这篇文章中，我将会以我们的应用 Shutter Points 为例，解释如何从浅色 UI 适配深色 UI。
优化颜色
1. 调色板
Shutter Points UI 的主要颜色是单色为主，目的是为了突出图片内容。主色调用于主导航栏，标签中使用 5 种辅色将图片注释与对应的类别联系起来。
△ Shutter Points 中的主色和辅色以及在界面中的应用截图
当应用深色模式时，亮色和低饱和度的颜色相比于饱和度高的颜色会更受欢迎。使用亮色的时候要确保元素易于阅读，并配合一个对比度适中的暗色背景。
使用谷歌提供的颜色编辑器（https://material.io/resources/theme-editor/）可以为每个品牌颜色创建一个自定义色板，然后从中选择合适的颜色。
根据谷歌设计规范（https://material.io/design/color/dark-theme.html#ui-application）建议，在使用深色模式时，一个好的经验法则是将调色板的色值范围保持在 200 左右。
（彩云注：谷歌提供的颜色规范中 100-900 数值的具体意义，感兴趣的请见知乎上的回答：https://www.zhihu.com/question/26340807，这里就不做深入解读了。）
任何一个深色界面都需要有一个合适的对比度，按 WCAG 的 AA 级标准来说，界面中的文字与背景的对比度至少要达到 4.5 : 1。
△ 品牌颜色中的一个浅色被选为深色模式配色
2. 界面颜色
有了新的配色方案在手，是时候改变界面的颜色了。深色主题中的所有界面都是以默认的深灰色 #121212 作为基准的。
在 UI 组件上添加不同透明度的白色，根据不同的层级搭配不同的透明度。
