iOS开发 DarkMode 暗黑模式

一、开发环境

Xcode11 正式版
iOS13 beta版本
Mac系统: 10.15 beta版本

二、适配原理

将同一个资源，创建出两种模式的样式。系统根据当前选择的样式，自动获取该样式的资源。
每次系统更新样式时，应用会调用当前所有存在的元素调用对应的一些重新方法，进行重绘视图，可以在对应的方法做相应的改动

三、资源适配

step1、颜色适配通过 Assets 配置

在 iOS 11和 Xcode 9 中，我们可以在 Images.xcassets 中添加颜色。
现在我们可以为颜色再配置一个用于暗黑模式的对应的颜色。

我们可以选择 (原彩,深色) 或者 (原彩,深色,夜览)

step2、图片适配

打开Assets.xcassets，新建一个Image set，打开右侧工具栏，点击最后一栏，找到Appearances，同样可以选择 (原彩,深色) 或者 (原彩,深色,夜览)，然后在对应的位置添加图片

四、代码适配

step1、UIColor 适配语义化颜色介绍加代码展示

iOS13 之前 UIColor只能表示一种颜色，而从 iOS13 开始UIColor是一个动态的颜色，在Light Mode和Dark Mode可以分别设置不同的颜色。
iOS13系统提供了一些动态颜色。苹果引入了全新系统颜色和一套根据颜色使用目的而约定颜色命名的语义化颜色

#pragma mark - 语义化颜色
@property (class, nonatomic, readonly) UIColor *systemBrownColor
@property (class, nonatomic, readonly) UIColor *systemIndigoColor
@property (class, nonatomic, readonly) UIColor *systemGray2Color
@property (class, nonatomic, readonly) UIColor *systemGray3Color
@property (class, nonatomic, readonly) UIColor *systemGray4Color
@property (class, nonatomic, readonly) UIColor *systemGray5Color
@property (class, nonatomic, readonly) UIColor *systemGray6Color
@property (class, nonatomic, readonly) UIColor *labelColor
@property (class, nonatomic, readonly) UIColor *secondaryLabelColor
@property (class, nonatomic, readonly) UIColor *tertiaryLabelColor
@property (class, nonatomic, readonly) UIColor *quaternaryLabelColor
@property (class, nonatomic, readonly) UIColor *linkColor
@property (class, nonatomic, readonly) UIColor *placeholderTextColor
@property (class, nonatomic, readonly) UIColor *separatorColor
@property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor
@property (class, nonatomic, readonly) UIColor *systemBackgroundColor
@property (class, nonatomic, readonly) UIColor *secondarySystemBackgroundColor
@property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor
@property (class, nonatomic, readonly) UIColor *systemGroupedBackgroundColor
@property (class, nonatomic, readonly) UIColor *secondarySystemGroupedBackgroundColor
@property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor
@property (class, nonatomic, readonly) UIColor *systemFillColor
@property (class, nonatomic, readonly) UIColor *secondarySystemFillColor
@property (class, nonatomic, readonly) UIColor *tertiarySystemFillColor
@property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor

IOS13系统UIColor增加了两个初始化方法，使用以下方法可以创建动态UIColor
注:一个是类方法，一个是实例方法，两个方法如下：

+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider

可以在 block 中判断 traitCollection.userInterfaceStyle，根据系统模式设置返回的颜色。userInterfaceStyle，是一个枚举类型，会告诉我们当前是LightMode还是DarkMode

typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {UIUserInterfaceStyleUnspecified,UIUserInterfaceStyleLight,UIUserInterfaceStyleDark,
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);

例子

UIColor *color = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {return [UIColor blackColor];} else {return [UIColor whiteColor];}}];

step2、CGColor 适配

我们知道iOS13后，UIColor能够表示动态颜色，但是CGColor依然只能表示一种颜色，那么对于CALayer等对象如何适配暗黑模式呢?这里提供两个方法供大家参考：
(1)、通过方法resolvedColorWithTraitCollection得到对应UIColor，再将UIColor转换为CGColor

UIColor *resolvedColor = [dyColor resolvedColorWithTraitCollection:previousTraitCollection];
layer.backgroundColor = resolvedColor.CGColor;

(2)、直接设置为一个动态UIColor的CGColor即可

- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {[super traitCollectionDidChange:previousTraitCollection];UIColor *dyColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trainCollection) {if ([trainCollection userInterfaceStyle] == UIUserInterfaceStyleLight) {return [UIColor redColor];} else {return [UIColor greenColor];}}];layer.backgroundColor = dyColor.CGColor;
}

⚠️ 注意!!! 我们需要为layer设置一个基本颜色，因为两个方法都是在traitCollectionDidChange中设置layer的颜色，那么如果没有发生模式切换，layer将会没有颜色

五、获取当前模式以及UITraitCollection介绍，监听模式切换

在 iOS 13 中，我们可以通过 UITraitCollection 来判断当前系统的模式。UIView 和 UIViewController 、UIScreen、UIWindow 都已经遵从了UITraitEnvironment 这个协议，因此这些类都拥有一个叫做 traitCollection 的属性，在这些类中，我们可以这样去判断当前 App 的颜色模式：

BOOL isDark = (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark);

另外，我们还可以通过 UITraitCollection.current 这个属性来获取当前 App 的颜色模式但是并不是所有的时候获取的都是正确的，只有在下面这些方法中，才可以放心的使用这个属性：

还没适配完又不想给用户看，可以先暂时全局关闭暗黑模式：在 Info.plist 文件中，添加 key 为 User Interface Style，类型为 String，value 设置为 Light 即可。
有时我们需要监听系统模式的变化，并作出响应
那么我们就需要在需要监听的viewController中，重写下列函数

#pragma mark - 监听系统模式变化
// ⚠️ 参数为变化前的traitCollection
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection;#pragma mark - 判断两个UITraitCollection对象是否不同
- (BOOL)hasDifferentColorAppearanceComparedToTraitCollection:(UITraitCollection *)traitCollection;

示例代码

- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {[super traitCollectionDidChange:previousTraitCollection];// trait发生了改变if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {// 执行操作}
}

在 iOS 13中，UIView、UIViewController 、UIWindow 有了一个 overrideUserInterfaceStyle 的新属性，可以覆盖系统的模式。

单个页面或视图关闭暗黑模式，设置 overrideUserInterfaceStyle 为对应的模式，强制限制该视图与其子视图以设置的模式进行展示，不跟随系统模式改变进行改变。
示例代码

self.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;

⚠️ 注意!!!

当我们强行设置当前viewController为Dark Mode后，这个viewController下的view都是Dark Mode
由这个ViewController present出的ViewController不会受到影响，依然跟随系统的模式
要想一键设置App下所有的ViewController都是Dark Mode，请直接在Window上执行overrideUserInterfaceStyle
对window.rootViewController强行设置Dark Mode也不会影响后续present出的ViewController的模式

六、扩展

step1、模糊效果

在 iOS 中，我们创建模糊效果的 UIVisualEffectView 的代码也会有明确表面明暗的情况。我们需要让这些模糊效果随着系统模式的切换而切换。UIKit 提供了新的模糊样式且是动态的，会随着系统模式的改版而自动匹配。
在利用 UIVisualEffectView 来创建一些类似模糊的效果时，不要设置类似 UIBlurEffectStyleExtraLight 这样带有明确颜色的效果，而是设置 UIKit 中新提供的动态样式的效果，比如 UIBlurEffectStyleSystemThinMaterialLight 或 UIBlurEffectStyleSystemThinMaterialDark。

UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemMaterial];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];

step2、启动图

如果我们的 App 使用了 LaunchImage 作为启动屏，那么就应该考虑把 LaunchImage 换成 LaunchScreen.storyboard 了，因为在 Xcode 11 中 LaunchImage 并不能像普通的图片那样针对深色模式设置另外的一张图片。

step3、富文本

给 Attributed String 加上一个 foregroundColor 属性，设置动态的颜色即可。

[attr addAttribute:NSForegroundColorAttributeName value:[UIColor labelColor] range:NSMakeRange(10, 20)];

step4、调试 dark mode

storyboards 和 xib 文件，现在可以切换界面之间的样式是默认还是暗黑了。

在模拟器上，也可以直接切换暗黑模式进行调试了。

step5、模式切换打印

模式切换时自动打印log，就不需要我们一次又一次的执行po命令了
在Xcode菜单栏Product->Scheme->Edit Scheme
选择Run->Arguments->Arguments Passed On Launch
添加以下命令即可
UITraitCollectionChangeLoggingEnabled YES

step6、Demo地址 YQDarkModeDemo