主要观点总结
本文主要介绍了深色模式在UI设计中的配色原则和应用方法。首先解释了深色风格与深色模式的区别，然后介绍了深色模式下配色的关键点，包括基础系统色彩、中性色应用、阴影和模糊的处理等。接着通过案例演示了深色模式的配色流程，包括中性色选择、彩色色相调整、装饰和内容色的优化等步骤。最后提到了一些在实际应用中需要注意的问题和技巧。
关键观点总结
关键观点1: 深色风格和深色模式的区别
深色风格是以深色背景为基调的设计风格，而深色模式则是与浅色模式配对的反色模式，用于支持系统的主题切换。
关键观点2: 深色模式下的配色原则
主要色彩在深色模式下需要微调，色相、明度、饱和度会轻微调节；中性色和浅色模式对调，深色模式下的中性色数量要精简；深色模式下移除阴影的使用，定义新的遮罩元素色值和透明度。
关键观点3: 深色模式的配色流程
首先选择中性色，为整个深色模式的色彩氛围奠基；然后调整彩色色相，根据环境的变化调整颜色的明度和饱和度；最后优化装饰和内容色，对于一些会和深色产生冲突的内容用图需要进行替换。
关键观点4: 实际应用中的注意事项和技巧
在适配深色模式时，需要注意装饰性字体标题、装饰性元素和彩色投影的切图处理；另外，内容图在深色模式下产生的观感也不同，需要替换更合适的图片。一些大型应用因为维护成本较高，可能选择不全面适配深色模式。
正文
前面完成了 UI 基础配色方式的说明，而案例是在以白色、浅色背景为主的配色方法。
而这篇就要围绕深色背景的配色展开，帮助大家补充另一个重要的 UI 配色原则。
深色模式和深色风格
在了解深色背景配色之前，设计师首先要了解深色模式和深色风格，是两个不同的概念。
首先解释深色风格，就是以深色背景为基调的设计风格，在网上的设计案例中并不少见。
而深色模式，
则是用来和浅色模式配对的反色模式
。首先主流的手机、平板、电脑系统中都有浅色、深色模式的选择， 用于切换系统 UI 是以浅色为主还是深色为主。
应用如果要跟随系统切换主题，就需要预设浅色和深色两种模式，也就是说深色模式是用于支持系统主题切换而做的，是搭配浅色模式提供的一种色彩变体版本。
深色风格和深色模式不同，主要原因就是如果产品一开始以深色风格进行设计，就是它的默认风格，意味着设计师要在系统处于默认浅色模式下它也是深色的。
这种风格的设计往往就不会去适配系统主题的切换，因为它已经是深色了，那么当系统主题改成深色模式就没有必要再提供一套设计。
另一个次要的原因，就是深色模式作为浅色模式的补充，它的选色逻辑是不同的，是基于原有配色上做出变体完成的，而不是单独选配。
除了模式和风格差异外，还有个需要理解的概念即 —— 深夜模式。今天很多人会把深夜模式和深色模式等同起来，但两者并不是一种东西。
深色模式的出发点是提供两种系统级的色彩方案，给用户提供更多的个性化设置选项（比如我就喜欢用深色模式）。
深色模式在夜间有更好的使用体验只是附带加成，但不表带深色模式在白天就不能正常用了
。
而夜间模式的出发点，则是在夜间低光源环境中，尽可能减少屏幕自发光的强度，减少用户用眼的疲劳。
夜间模式的配色逻辑和深色模式不同，但因为现在深色模式的普及且附带了夜间的特性，所以多数应用都放弃了夜间模式功能。
所以最后总结一遍，在我们进入配色阶段，首先要确定配色风格，是使用浅色还是深色风格，它们都要独立完成色彩的选择。
如果一开始先做了浅色风格，但还要添加深色模式，那就要在浅色模式的配色基础上进行深色的选色，确定一套匹配的深色模式配色标准。
深色模式的配色逻辑
苹果在 iOS13 中更新了深色模式，也提供了一套深色模式的适配规范，我们今天制定深色模式的配色方法主要参照这套规范开展。所以要掌握深色模式的配色逻辑，首先要了解官方的定义规范。
-
-
-
Part.1 基础系统色彩
iOS 默认应用了一套系统色彩，在深色模式中，虽然还是使用这些色相但轻微调整了明度和饱和度。因为相同颜色在浅色和深色背景中给人带来的感受是不同的，所以要获得一致的色彩体验，就要在深色模式下做出调整。
深色模式的中性色和浅色模式完全不同，浅色背景下的中性色越突出颜色越深，深色背景下的中性色越突出则颜色越亮。
在 iOS 的中性色定义中是围绕场景制定的，包括背景、列表、文字、填充和描边等。
首先解释背景中性色，iOS 默认使用三个中性背景色，用于区分不同模块之间的堆叠。要重点注意的是，再浅色模式下模块堆叠是“白-灰-白”，而在深色模式下堆叠是 “深灰-中灰-浅灰”。
然后是列表用色，iOS 也定义了三个颜色，用于区分背景、列表背景、分割线的用色。
之后的文字用色上 iOS 采用了4个等级，除了纯黑和纯白外，其它灰色都使用带有色相和透明度的灰色。
最后 iOS 还提供了四个等级的中性色用于其它内容的填充和描边。
最后就是图层效果的应用上，主要包含阴影和毛玻璃两个效果。
首先说阴影，它的成像原理是在投射平面上形成更深的轮廓，但本来背景就是深色的时候还怎么加深？所以深色模式下统一移除阴影。
而很多新手的深色模式是用更亮的颜色做阴影，那不叫阴影，叫外发光。
然后就是毛玻璃效果，iOS 中的毛玻璃包含六种不同的模糊等级，使用了不同的透明度来表现。
以上就是 iOS 官方规范中深色模式应用的内容，在我们自己的项目中，不可能完全照搬这套标准和数值，所以要总结出对应的规律：
-
主要色彩在深色模式下要微调，色相、明度、饱和度会轻微调节
-
中性色和浅色模式对调，但在深色模式下的中性色数量要精简
-
在深色模式下移除阴影的使用，定义新的遮罩元素色值和透明度
深色模式的应用案例
上一次分享我们完成了浅色模式的设计，并创建了对应的色彩规范，我们依旧要使用它来完成深色模式的配色演示。
-
-
-
装饰、内容色优化
Step1:中性色选择
配色的第一步依旧是选择中性色，为整个深色模式的色彩氛围奠基。中性色配色的逻辑就是从深到浅，从下到上（层级）选择，可以使用原设计稿替换色彩来进行测试。
深色模式对中性色的感知没有浅色那么敏感，所以在配色过程中，减少了一级中性色。
要注意的是，在实际项目的规范中，色彩是作为一个特定角色（命名、等级）记录的，虽然你可能要合并、削减一些颜色，但依旧要根据浅色模式包含的角色给出对应的深色模式色值。这也是 Figma 的变量工具应用要点原则之一，不能因为你删减了颜色而让一些色彩的角色为空。
Step2:彩色色相选择
彩色之所以要调节，是因为人对颜色的观感会根据环境的变化而变化，浅色模式对一个颜色的感受和深色模式下是不同的。所以当换几个呢变成深色，这些固定用色也要做出调整匹配环境。
