FluentDarkModeKit-微軟的暗黑模式適配框架

FluentDarkModeKit 框架是微軟開發的一個用于適配 iOS 暗黑模式的框架。

使用

基本用法

UIColor

Swift

extension UIColor {
    init(_: DMNamespace, light: UIColor, dark: UIColor)
}

let color = UIColor(.dm, light: .white, dark: .black)

Objective-C

@interface UIColor (FluentDarkModeKit)
- (UIColor *)dm_colorWithLightColor:(UIColor *)lightColor darkColor:(UIColor *)darkColor;
@end

UIColor *color = [UIColor dm_colorWithLightColor:UIColor.whiteColor darkColor:UIColor.blackColor];

UIImage

Swift

extension UIImage {
    init(_: DMNamespace, light: UIImage, dark: UIImage)
}

let lightImage = UIImage(named: "Light")!
let darkImage = UIImage(named: "Dark")!
let image = UIImage(.dm, light: lightImage, dark: darkImage)

Objective-C

@interface UIImage (FluentDarkModeKit)
- (UIImage *)dm_imageWithLightImage:(UIImage *)lightImage darkImage:(UIImage *)darkImage;
@end

其他

FluentDarkModeKit 和 Apple 的操作類型（有些許差異）。FluentDarkModeKit 包含一個全局的 DMTraitCollection，在自定義的布局中可以通過 DMTraitCollection.current 來訪問。

當主題改變時， FluentDarkModeKit通過下面的代理方法來通知當前的 window 上 views 和 view controllers。

Swift

protocol DMTraitEnvironment: NSObjectProtocol {
    func dmTraitCollectionDidChange(_ previousTraitCollection: DMTraitCollection?)
}

Objective-C

@protocol DMTraitEnvironment <NSObject>
- (void)dmTraitCollectionDidChange:(nullable DMTraitCollection *)previousTraitCollection;
@end

實現原理

下面來分析一下 FluentDarkModeKit 的具體實現。

NSProxy

NSProxy 是少數不繼承自 NSObject 的類型。

在該框架中 NSProxy 承載了兩種模式下的不同顏色和不同圖片。

顏色 UIColor

FluentDarkModeKit 聲明了DMDynamicColor 類，

NS_SWIFT_NAME(DynamicColor)
@interface DMDynamicColor : UIColor

@property (nonatomic, readonly) UIColor *lightColor;
@property (nonatomic, readonly) UIColor *darkColor;

- (instancetype)initWithLightColor:(UIColor *)lightColor darkColor:(UIColor *)darkColor;

@end

在 .h 文件中，我們可以看出 DMDynamicColor 繼承子 UIColor，但是在 .m 中，我們可以看出它真正創建的是一個 DMDynamicColorProxy。

@interface DMDynamicColorProxy : NSProxy <NSCopying>

- (UIColor *)initWithLightColor:(UIColor *)lightColor darkColor:(UIColor *)darkColor {
  return (DMDynamicColor *)[[DMDynamicColorProxy alloc] initWithLightColor:lightColor darkColor:darkColor];
}

@end

DMDynamicColorProxy 繼承自 NSProxy，它將所有的事件轉發到 resolvedColor ，而 resolvedColor 是根據當前系統的模式返回的 lightColor 或者 darkColor。這樣 DMDynamicColorProxy 對外的表現就是一個 UIColor，并且可以根據系統的模式返回對應的顏色。

@interface DMDynamicColorProxy : NSProxy <NSCopying>

@property (nonatomic, strong) UIColor *lightColor;
@property (nonatomic, strong) UIColor *darkColor;

@property (nonatomic, readonly) UIColor *resolvedColor;

@end

@implementation DMDynamicColorProxy

// TODO: We need a more generic initializer.
- (instancetype)initWithLightColor:(UIColor *)lightColor darkColor:(UIColor *)darkColor {
  self.lightColor = lightColor;
  self.darkColor = darkColor;

  return self;
}

- (UIColor *)resolvedColor {
  if (DMTraitCollection.currentTraitCollection.userInterfaceStyle == DMUserInterfaceStyleDark) {
    return self.darkColor;
  } else {
    return self.lightColor;
  }
}

// MARK: UIColor

- (UIColor *)colorWithAlphaComponent:(CGFloat)alpha {
  return [[DMDynamicColor alloc] initWithLightColor:[self.lightColor colorWithAlphaComponent:alpha]
                                          darkColor:[self.darkColor colorWithAlphaComponent:alpha]];
}

// MARK: NSProxy

- (NSMethodSignature *)methodSignatureForSelector:(SEL)sel {
  return [self.resolvedColor methodSignatureForSelector:sel];
}

- (void)forwardInvocation:(NSInvocation *)invocation {
  [invocation invokeWithTarget:self.resolvedColor];
}

// MARK: NSObject

- (BOOL)isKindOfClass:(Class)aClass {
  static DMDynamicColor *dynamicColor = nil;
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    dynamicColor = [[DMDynamicColor alloc] init];
  });
  return [dynamicColor isKindOfClass:aClass];
}

// MARK: NSCopying

- (id)copy {
  return [self copyWithZone:nil];
}

- (id)copyWithZone:(NSZone *)zone {
  return [[DMDynamicColorProxy alloc] initWithLightColor:self.lightColor darkColor:self.darkColor];
}

@end

注意：對于 UIColor 的方法中返回值為 UIColor 的，DMDynamicColorProxy 都進行了實現，目的就是當 UIColor 在調用這些方法時，返回的類型依然為 DMDynamicColorProxy。

圖片 UIImage

和顏色的實現原理一樣，也聲明了 DMDynamicImageProxy，由 resolvedImage 根據當前的模式返回 lightImage 或者 darkImage。

@interface DMDynamicImageProxy : NSProxy

@property (nonatomic, readonly) UIImage *resolvedImage;

- (instancetype)initWithLightImage:(UIImage *)lightImage darkImage:(UIImage *)darkImage;

@end

在具體的實現中，DMDynamicImageProxy 也是將事件轉發到 resolvedImage，這樣在外界看來 DMDynamicImageProxy 的表現就是 UIImage，但是可以根據當前的模式返回不同的 Image。

注意：對于 UIImage 的方法中返回值為 UIImage 的，DMDynamicImageProxy 都進行了實現，目的就是當 UIImage 在調用這些方法時，返回的類型依然為 DMDynamicImageProxy。

替換設置方法

我們先來看一個小測試，同一個顏色（實際類型為 DMDynamicColorProxy）賦值給 view 的 backgroundColor 和 button 的 titleColor 后，再和原來的顏色進行對比，結果是否相等？

let color = UIColor(.dm, light: .white, dark: .black)
view.backgroundColor = color
if view.backgroundColor == color {
  debugPrint("equal")
} else {
  debugPrint("not equal")
}

let button = UIButton()
button.setTitleColor(color, for: .normal)
if button.titleColor(for: .normal) == color {
  debugPrint("equal")
} else {
  debugPrint("not equal")
}

輸出：

not equal
equal

也就是說，同樣是給顏色進行賦值，但是 Apple 的處理是不一樣的，有的和被賦予的值一致，有的則不一致。（應該是有些賦值會對顏色進行拷貝）

如果使用 DMDynamicColorProxy 對一個顏色進行賦值，再取出時類型卻變成 UIColor 的，它就丟失了 lightColor 和 darkColor。對于這種屬性設置，需要在設置 DMDynamicColorProxy 時進行保存。

所以 FluentDarkModeKit 對這類的屬性進行了替換，例如 setTintColor：

extension UIView {
  private struct Constants {
    static var dynamicTintColorKey = "dynamicTintColorKey"
  }

  // 轉化 setter: tintColor 的方法
  // 設置的時候，記錄 dm_dynamicTintColor
  static let swizzleSetTintColorOnce: Void = {
    if !dm_swizzleInstanceMethod(#selector(setter: tintColor), to: #selector(dm_setTintColor)) {
      assertionFailure(DarkModeManager.messageForSwizzlingFailed(class: UIView.self, selector: #selector(setter: tintColor)))
    }
  }()

  private var dm_dynamicTintColor: DynamicColor? {
    get {
      return objc_getAssociatedObject(self, &Constants.dynamicTintColorKey) as? DynamicColor
    }
    set {
      objc_setAssociatedObject(self, &Constants.dynamicTintColorKey, newValue, .OBJC_ASSOCIATION_COPY_NONATOMIC)
    }
  }

  @objc private dynamic func dm_setTintColor(_ color: UIColor) {
    dm_dynamicTintColor = color as? DynamicColor
    dm_setTintColor(color)
  }
}

其他方法的替換

willMove(toWindow:)

頁面上顯示的 view 可以通過 subviews，一層一層的獲取到，然后根據當前的模式進行修改顏色。對于不在頁面上顯示的 view，只能通過替換 willMove(toWindow:) 方法，在添加到 window 時更新當前模式對應的顏色和圖片。

extension UIView {
  // 調用 willMove(toWindow:) 的時候：
  // 1. dm_updateDynamicColors
  // 2. dm_updateDynamicImages
  static let swizzleWillMoveToWindowOnce: Void = {
    if !dm_swizzleInstanceMethod(#selector(willMove(toWindow:)), to: #selector(dm_willMove(toWindow:))) {
      assertionFailure(DarkModeManager.messageForSwizzlingFailed(class: UIView.self, selector: #selector(willMove(toWindow:))))
    }
  }()

  @objc private dynamic func dm_willMove(toWindow window: UIWindow?) {
    dm_willMove(toWindow: window)
    if window != nil {
      dm_updateDynamicColors()
      dm_updateDynamicImages()
    }
  }
}

setBackgroundColor

替換 setBackgroundColor 有點特殊，替換代碼如下：


@implementation UIView (DarkModeKit)

static void (*dm_original_setBackgroundColor)(UIView *, SEL, UIColor *);


/// 設置背景色
static void dm_setBackgroundColor(UIView *self, SEL _cmd, UIColor *color) {
  // 記錄
  if ([color isKindOfClass:[DMDynamicColor class]]) {
    self.dm_dynamicBackgroundColor = (DMDynamicColor *)color;
  } else {
    self.dm_dynamicBackgroundColor = nil;
  }
  // 設置
  dm_original_setBackgroundColor(self, _cmd, color);
}

// https://stackoverflow.com/questions/42677534/swizzling-on-properties-that-conform-to-ui-appearance-selector
+ (void)dm_swizzleSetBackgroundColor {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    Method method = class_getInstanceMethod(self, @selector(setBackgroundColor:));
    dm_original_setBackgroundColor = (void *)method_getImplementation(method);
    method_setImplementation(method, (IMP)dm_setBackgroundColor);
  });
}

- (DMDynamicColor *)dm_dynamicBackgroundColor {
  return objc_getAssociatedObject(self, _cmd);
}

- (void)setDm_dynamicBackgroundColor:(DMDynamicColor *)dm_dynamicBackgroundColor {
  objc_setAssociatedObject(self,
                           @selector(dm_dynamicBackgroundColor),
                           dm_dynamicBackgroundColor,
                           OBJC_ASSOCIATION_COPY_NONATOMIC);
}

@end

命名空間

FluentDarkModeKit 對 UIColor 和 UIImage 的初始化方法進行了擴展，為了避免沖突，在 Object-C 中添加了 dm_ 的前綴，在 swift 中，在初始化方法前面添加了一個自定義的枚舉 DMNamespace 參數。

UIColor

NS_ASSUME_NONNULL_BEGIN

@interface UIColor (DarkModeKit)

+ (UIColor *)dm_colorWithLightColor:(UIColor *)lightColor darkColor:(UIColor *)darkColor
NS_SWIFT_UNAVAILABLE("Use init(_:light:dark:) instead.");

#if __swift__
+ (UIColor *)dm_namespace:(DMNamespace)namespace
      colorWithLightColor:(UIColor *)lightColor
                darkColor:(UIColor *)darkColor NS_SWIFT_NAME(init(_:light:dark:));
#endif

@end

NS_ASSUME_NONNULL_END

UIImage

NS_ASSUME_NONNULL_BEGIN

@interface UIImage (DarkModeKit)

+ (UIImage *)dm_imageWithLightImage:(UIImage *)lightImage darkImage:(UIImage *)darkImage
NS_SWIFT_UNAVAILABLE("Use init(_:light:dark:) instead.");

#if __swift__
+ (UIImage *)dm_namespace:(DMNamespace)namespace
      imageWithLightImage:(UIImage *)lightImage
                darkImage:(UIImage *)darkImage NS_SWIFT_NAME(init(_:light:dark:));
#endif

@end

NS_ASSUME_NONNULL_END

在 Object-C 的代碼中，通過 #if __swift__ 來判斷編譯環境，通過 NS_SWIFT_NAME(init(_:light:dark:)) 來指定在 swift 中的方面名稱。

注意：這種形式，并沒有起到命名空間的作用。在代碼中，依然可以定義相同的方法：

import FluentDarkModeKit

extension UIColor {
  convenience init(_ name: DMNamespace, light: UIColor, dark: UIColor) {
    self.init(white: 0, alpha: 1.0)
  }
}

這樣就覆蓋了 FluentDarkModeKit 框架中的方法。雖然在實際的編程中都不會這樣做。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,527評論 6贊 544
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,687評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
    開封第一講書人閱讀 178,640評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,957評論 1贊 318
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,682評論 6贊 413
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 56,011評論 1贊 329
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,009評論 3贊 449
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,183評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,714評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,435評論 3贊 359
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,665評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,148評論 5贊 365
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,838評論 3贊 350
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,627評論 2贊 380

推薦閱讀更多精彩內容