SwiftUI Tips 006：检测 Light Mode 和 Dark Mode

自 iOS 13 正式在 iOS 引入 Dark Mode 后，适配 Dark Mode 也就成了 iOS App 的标配。而跟随 iOS 13 一起推出的 SwiftUI 自然也是天生就支持 Dark Mode。在 SwiftUI 框架中，提供了 ColorScheme 这个枚举来标识用户设置的是 Light Mode 还是 Dark Mode，同时提供了对应的环境变量 \.colorScheme 来检测用户设置中当前的模式。

我们来看一个简单的示例。首先定义一些颜色常量

let textColorDark = Color(red: 238.0 / 255, green: 238.0 / 255, blue: 238.0 / 255)
let textColorLight = Color(red: 41.0 / 255, green: 45.0 / 255, blue: 67.0 / 255)

let bgColorDark = Color(red: 41.0 / 255, green: 45.0 / 255, blue: 67.0 / 255)
let bgColorLight = Color(red: 238.0 / 255, green: 238.0 / 255, blue: 238.0 / 255)

然后在 ContentView 中添加一个 @Environment 变量 colorScheme

@Environment(\.colorScheme) var colorScheme

在接下来的 body 中，便可以根据 colorScheme 来显示不同模式下的 UI 。完整的 ContentView 的代码如下所示：

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme
    var body: some View {
        ZStack {
            Text(colorScheme == .light ? "Light Mode" : "Dark Mode")
                .font(.system(size: 40))
                .bold()
                .foregroundColor(colorScheme == .light ? textColorLight : textColorDark )
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(colorScheme == .light ? bgColorLight: bgColorDark)
        .edgesIgnoringSafeArea(.all)
    }
}

在模拟器或真机上，我们可以在系统设置的 Developer -> Dark Appearence 来切换模式以查看效果。而在 Preview 中，我们可以通过 environment 修饰器来传入环境值，如下所示：

struct DarkModeView_Previews: PreviewProvider {
    static var previews: some View {
        DarkModeView()
            .environment(\.colorScheme, .dark)

就是这么简单。以下是效果：