iOS 13 蘋果推出了暗黑模式，暗黑模式在夜間可以更好的保護視力，也可以節省 App 電量消耗。但是 Apple 提供的暗黑模式只支持 iOS 13，為了給用戶帶來更好的體驗，我們希望 iOS 13 以下的系統也可以支持暗黑模式。另外我們還給用戶提供了自主選擇的權利，可以在 App 內手動關閉暗黑模式，不跟隨系統主題變化。
京東 App 涉及業務模塊眾多，整個適配工作量巨大，為了解決上述問題，並讓各模塊通過統一的接口快速接入，我們開發了暗黑基礎組件，提供以下能力：
- 支持 iOS 9 及以上系統，同時兼容 iOS 13 系統暗黑模式
- 支持整體切量、降級
- 支持跟隨系統模式，也可以選擇不跟隨，使用 App 內部的模式
- 內置調試工具，幫助開發者快速調試，提升效率
- 支持顏色模式擴展
基礎組件設計方案如下：
業務接入
業務接入時需要調用基礎組件提供的jdbappearance_bindUpdater方法，傳入一個Block並在其中處理UI更新的邏輯，基礎組件會綁定Block和UIView，然後將UIView存儲在HashTable中，在合適的時機通過遍歷HashTable和執行綁定的Block來更新UI。業務組件的接入方案如下：
需要注意的是，遍歷HashTable的時候並不是所有的Block都會執行，這裡會判斷UIView的window是否存在，如果window有值，就執行UIView綁定的Block，否則會先把這個Block標記為稍後執行，當UIView下次出現在window中時（didMoveToWindow 被調用的時候）就會執行這個Block。
另外不用擔心Block會在每次 didMoveToWindow 時被調用，因為只有顏色模式變化的時候，Block才會被標記為稍後執行。
如果涉及接口調用等異步場景，是否會增加接入成本呢？我們通過下面的代碼示例看一下業務是如何進行適配的：
<code>
cell.viewA.backgroundColor = [UIColor redColor];
cell.viewB.image = [UIImage imageNamed:@"xxx"];
// 接入後
@weakify(cell)
[cell jdbappearance_bindUpdater:^(JDBAppearance *apperance, UIView *bindView) {
@strongify(cell)
cell.viewA.backgroundColor = [UIColor jdbappearance_colorBR];
cell.viewB.image = [UIImage jdbappearance_imageNamed:@[@"light_xx", @"dark_xx"]];
}];/<code>
因為每次調用jdbappearance_bindUpdater 時，會立刻執行一次Block，所以不論是否涉及異步場景，接入方式都是統一的，並不會帶來額外的接入成本。
自定義Updater：
Block機制基本可以滿足所有的適配場景，但是實際開發中，我們可能希望有一些便捷的方法，比如直接調用一個方法jd_setBackgroundColor設置UIView的背景色。
這樣的需求也是可以滿足的，我們來看一下如何封裝這樣的API：
<code>@implementation UIView (CustomUpdater)
- (void)jdb_setBackgroundColor:(NSArray *)colors
{
[self jdbappearance_bindUpdater:^(JDBAppearance * _Nonnull appearance, UIView * _Nonnull bindView) {
bindView.backgroundColor = [UIColor jdbappearance_colorWithHex:colors];
} updaterKey:@"jdb_setBackgroundColor"];
}
@end
/<code>
注意綁定Block的時候需要指定一個updaterKey，updaterKey允許一個UIView綁定多個Block。使用方式也很簡單，並且不需要考慮循環引用的問題：
<code>[cell jdb_setBackgroundColor:@[@"#FFFFFF", @"#1D1B1B"]];/<code>
App 內切換暗黑模式
這個功能允許用戶在 App 內手動開啟或者關閉暗黑模式，但是存在一個問題：
如果系統開啟了暗黑，但是 App 內關閉了，此時一些系統控件的顏色仍然是深色的（例如通過UIImagePickerController調起的系統相冊），從而導致系統控件顏色和 App 顏色不一致。
在闡述解決方案之前，先來介紹一下UITraitCollection：
UITraitCollection是 iOS 8 開始新增的一個類，管理著 App 中的用戶界面相關的一些系統特徵，每個視圖都擁有自己的UITraitCollection。
iOS 13 顏色模式相關的信息，就存儲在userInterfaceStyle屬性中。如果我們想給視圖單獨指定userInterfaceStyle，需要使用 iOS 13 新增的 API overrideUserInterfaceStyle，另外設置overrideUserInterfaceStyle是對子視圖生效的。
可是這麼多視圖，我們應該修改誰的屬性呢？下面這張圖描述了視圖之間的層級關係以及UITraitCollection的傳遞路線：
UITraitCollection是自上而下傳遞的，但是 UIScreen 和 UIWindowScene 並未提供 overrideUserInterfaceStyle 這個API，我們只能修改UIWindow的屬性，使UIWindow及其所有子視圖展示我們設置的顏色：
- 如果開啟了暗黑，將所有window的overrideUserInterfaceStyle設置為 UIUserInterfaceStyleDark。
- 如果關閉了暗黑，將所有window的overrideUserInterfaceStyle設置為 UIUserInterfaceStyleLight。
如果在 overrideUserInterfaceStyle 修改後，又有新的 window 出現，這種情況要怎麼處理呢？我們註冊了UIWindowDidBecomeVisibleNotification通知，這個通知會在一個 UIWindow 對象變為可見的時候發出，在接收到通知後，設置這個window的overrideUserInterfaceStyle屬性。
總結：通過修改window的overrideUserInterfaceStyle屬性，大多數系統控件的顏色都能和App的顏色保持一致。
監聽系統模式切換
為什麼要提這個呢？用traitCollectionDidChange監聽不就可以了嗎？
因為我們發現，在修改overrideUserInterfaceStyle後，當切換系統顏色模式時，window及其子視圖的traitCollectionDidChange並沒有被調用。
雖然官方文檔中並沒有找到明確的說明，但是經過驗證，只要我們將window的 overrideUserInterfaceStyle設置為UIUserInterfaceStyleDark 或 UIUserInterfaceStyleLight，window 及其子視圖我們都沒法監聽。只有默認的UIUserInterfaceStyleUnspecified才會生效。
那怎麼辦呢？我們剛剛把所有window的 overrideUserInterfaceStyle都改了
辦法總比困難多！仔細來分析一下，我們修改window的overrideUserInterfaceStyle是為了同步修改系統控件的顏色。那我們是不是可以創建一個獨立的ObserveWindow，在切換模式的時候，如果是ObserveWindow就跳過，只修改其他window的overrideUserInterfaceStyle。這樣就可以在ObserveWindow中實現traitCollectionDidChange方法，處理監聽系統模式切換以及更新 App UI 的邏輯：
<code>@implementatiton ObserveWindow
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
{
if (@available(iOS 13.0, *)) {
if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
// 1. 修改 App 內部樣式
// 2. 修改其他 window 的 overrideUserInterfaceStyle
// 3. 通知業務更新 UI
}
}
}
@end/<code>
多任務界面快照
在適配過程中，我們發現一個問題：在多任務界面，會出現 App 展示的顏色和系統顏色模式剛好相反。
進一步分析後，發現 App 在進入後臺時，traitCollectionDidChange 執行了2次，這兩次執行過程中系統的 userInterfaceStyle 分別是 UIUserInterfaceStyleDark 和 UIUserInterfaceStyleLight。
這是為什麼呢？我們查看了下traitCollectionDidChange被調用時的堆棧：
看了堆棧就明白了，系統在進入後臺時會創建快照，這個快照其實就是系統多任務界面展示的快照，調用2次是為了分別對深色和淺色進行快照，當進入多任務界面時，系統會根據當前的顏色模式展示正確的快照。
為什麼我們會遇到顏色模式相反的問題呢，這裡要先介紹一下“跟隨系統”的功能：
App 中有一個開關，用來控制是否跟隨系統顏色模式。當用戶首次選擇切換到暗黑模式，會默認開啟跟隨系統，此時 App 模式會和系統模式保持一致。如果關閉“跟隨系統”的開關，則不再監聽系統模式的切換，以 App 內用戶選擇的模式為準。
當關閉“跟隨系統”的開關後，App 內的顏色模式有可能和系統的不一致，當出現不一致的時候，快照就會出錯，比如Dark模式截取了Light模式的圖。為了避免這種錯誤，我們加了一個判斷條件，只有“跟隨系統”開啟的情況下才會開啟快照功能。
修改後的traitCollectionDidChange實現如下：
<code>-(void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
{
if (@available(iOS 13.0, *)) {
UIApplicationState state = [UIApplication sharedApplication].applicationState;
if (state == UIApplicationStateBackground) {
// 系統切換到後臺時，會對顏色模式取反截2張圖
JDBAppearanceManager *manager = [JDBAppearanceManager sharedInstance];
if (manager.followSystemMode) {
// 如果跟隨系統，就更新UI，系統會在UI更新完成後進行快照
}
} else {
// 觸發場景：系統控制中心切換模式、後臺進入前臺、Xcode調試菜單切換模式
if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
// 1. 修改 App 內部樣式
// 2. 修改其他 window 的 overrideUserInterfaceStyle
// 3. 通知業務更新 UI
}
}
}
}/<code>
個性化定製
基礎組件的定位，除了為京東 App 的暗黑模式適配提供支持，我們還希望可以給更多的 App 使用。暗黑基礎組件在支持現有功能的基礎上，也支持個性化定製功能或者API，接入方可以根據自己的需求靈活選擇：
- App 內部切換開關
- 多任務快照
- 自定義 Updater
- 自定義顏色模式
閱讀更多 程序民工那些事 的文章
