iOS 暗黑模式适配

激活暗黑模式

在view或者controller中 overrideUserInterfaceStyle = .dark print(traitCollection.userInterfaceStyle) // dark

但是显然这样要适配的地方太多, 考虑到overrideUserInterfaceStyle这个属性的的影响关系链路为 UIScreen - UIWindow - UIController - UIPresentController - UIView 所以在xcode11后 // 不包括iPadOS

let scene = UIApplication.shared.connectedScenes.first?.delegate as? SceneDelegate
scene?.window?.overrideUserInterfaceStyle = .dark
复制代码

如何响应暗黑模式

在Macos下可以切换暗黑模式后, 系统会自动刷新NSView的 updateLayer() 方法, 在UIView下则没有与之对应的方法, 但我们可以通过KVO监听的方式, 比如我们在个人设置里切换了模式, 那么就需要通知各个首页重新绘制必要的部分

// Use a property to keep a reference to the key-value observation object.
var observation: NSKeyValueObservation?

func applicationDidFinishLaunching(_ aNotification: Notification) {
  observation = NSApp.observe(\.effectiveAppearance) { (app, _) in
    app.effectiveAppearance.performAsCurrentDrawingAppearance {
      // Invoke your non-view code that needs to be aware of the
      // change in appearance.
    }
  }
}
复制代码

颜色适配

iOS 13 之前 UIColor 只能表示一种颜色，从 iOS 13 开始 UIColor 是一个动态的颜色，它可以在 LightMode 和 DarkMode 拥有不同的颜色。如何自己创建一个动态的 UIColor 上面我们说到系统提供了一些动态的颜色供我们使用，但是在正常开发中，系统提供的颜色肯定是不够用的，所以我们要自己创建动态颜色。 iOS 13 下 UIColor 增加了一个初始化方法，我们可以用这个初始化方法来创建动态颜色。 @available(iOS 13.0, *) public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)

这个方法要求传一个闭包进去，当系统从 LightMode 和 DarkMode 之间切换的时候就会触发这个回调。这个闭包返回一个 UITraitCollection 类，我们要用这个类的 userInterfaceStyle 属性。 userInterfaceStyle是一个枚举，声明如下

@available(iOS 12.0, *)
public enum UIUserInterfaceStyle : Int {
    case unspecified
    case light
    case dark
}
复制代码

这个枚举会告诉我们当前是 LightMode or DarkMode 使用如下:

let backgroundColor = UIColor { (trainCollection) -> UIColor in 
    if trainCollection.userInterfaceStyle == .dark { 
        return UIColor.black 
    } else { 
        return UIColor.white 
    } 
}
复制代码

图片适配

打开 Assets.xcassets 把图片拖拽进去，我们可以看到这样的页面

image.png

然后我们在右侧工具栏中点击最后一栏，点击 Appearances 选择 Any, Dark，如图所示

image.png

我们把 DarkMode 的图片拖进去，如图所示

image.png

当然我们也可以使用代码方式:

// Image for light mode.
let lightImage: UIImage!

// Image for dark mode.
let darkImage: UIImage!

lightImage?.imageAsset?.register(darkImage, with: .init(userInterfaceStyle: .dark)) 
复制代码

这样lightImage就具备动态性了, 但这样的话每个图片都要改, 代码侵入性强, 代价大

4.其他 Status Bar 之前 Status Bar 有两种状态，default 和 lightContent 现在 Status Bar 有三种状态，default, darkContent 和 lightContent 现在的 darkContent 对应之前的 default，现在的 default 会根据情况自动选择 darkContent 和 lightContent 菊花具体适配

参考文档:
https://developer.apple.com/documentation/uikit/appearance_customization/supporting_dark_mode_in_your_interface

最后编辑于：2021.07.02 16:49:51