独立 App 适配深色模式（二）：颜色、图片的适配

关于我：大厂摸鱼 + 业余独立开发，之后会输出深度技术文章 + 独立开发技巧

我的往期技术文章合集：RickeyBoy - Gitbub

我的独立开发 App：iColors - 设计灵感配色助手

上一篇内容：独立 App 适配深色模式（一）：如何进行调试

我们书接上文，第一步是进行颜色的适配。在上一篇文章中，我们已经设定好了一个 Color Set，预先定义了这个 Color 在深色模式、浅色模式不同情况下对应的显示情况。不过在讲解具体使用颜色之前，我们还要再讲解一个小问题：这个 Any Appearance 到底是什么？

需要注意的是，这里默认的两个颜色分别叫做 Any Appearance 和 Dark。为什么不是 Light 和 Dark？因为其实除了 Light 和 Dark，其实还有一种情况，就是还有某些不支持深色模式的设备！

我们打开 Inspectors 看板，在里面找到 Appearances，就能发现玄机，其实他一共有三个模式：

None：只有一个颜色选项，不论什么情况下都用这个颜色
Any, Dark：两个颜色选项，Dark 代表深色模式下的颜色，Any 代表其他情况
Any, Light, Dark：三个颜色选项，Light 和 Dark 分别代表浅色模式和深色模式，Any 代表剩下的情况，也就是不支持深色模式的设备上采用的颜色！

为了方便的在 App 中使用预定义的、支持深色模式的 Color Set，我们只需要为 Color 新增一个拓展即可：

scss 复制代码

extension Color {
  static let ListBackground = Color("ListBackground")
}

这样我们就可以使用定义的背景颜色 ListBackground，像下面这样：

scss 复制代码

SomeView()
  .background(Color.ListBackground)

🌄 第二步：图片适配深色模式

在深色模式下，会有采用不同的颜色这一点很容易想到。其实除了颜色资源之外，我们还需要适配图片资源，在深色模式下使用不同的图片，会让 App 显得更有新意。

我们自然可以在页面布局的逻辑中，增加 if else 来设置不同的图片，但其实我们还有更好的方式。和 Color Set 类似，图片也可以通过预先定义的方式，来适配深色模式。

这样，我们就获得了 6 个格子，支持上传两张图片了。根据提示，放入对应的图片即可。比如下面 Any 中放入太阳图案，在浅色模式下会显示；Dark 中放入月球图案，在深色模式下会显示：

在代码中使用时无需考虑深浅色状态，直接像普通图片一样直接使用就行了，非常简单：

scss 复制代码

Image("name")

这一篇补充讲解了一下颜色、图片资源通过预定义的方式，来适配深色模式。当这两项内容完成之后，接下来我们就可以进行整体的配置了。