Adapt JDME To iOS13 DarkMode

全局关闭DarkMode

这是目前采起的方案，让APP始终保持LightMode，在info.plsit文件中，添加UIUserInterfaceStyle , 值为Light 。

咱们要适配DarkMode，须要将UIUserInterfaceStyle删除。

UIColor

iOS13以前 UIColor只能表示一种颜色，从iOS13开始UIColor是一个动态的颜色，在LightMode和DarkMode能够分别设置不一样的颜色。

1.首先系统为咱们提供了一些动态颜色，使用这种动态颜色，系统直接替咱们完成了适配工做。可是系统提供的颜色不符合APP的设计规范的话，通常状况下咱们用不到。

@property (class, nonatomic, readonly) UIColor *systemBrownColor        API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemIndigoColor       API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
@property (class, nonatomic, readonly) UIColor *systemGray2Color        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
...
...
复制代码

2.自定义动态UIColor

UIColor *textDyColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
      if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
          return [UIColor JMEColorWithHexString:@"#2E2D2D"];
      } else {
          return [UIColor yellowColor];
      }
 }];
 _nameLabel.textColor = textDyColor;
复制代码

这样当系统切换DarkMode/LightMode时，会回调(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider这个block，自动为咱们更新颜色。

图片资源

JDME目前使用了Assets.xcassets来管理图片，适配DarkMode仍是比较方便的。

打开Assets.xcassets，设置Appearance为 Any,Dark

将设计师提供的DarkMode素材图片拖入对应的位置，还像往常同样使用图片就能够了。

[_logoImage setImage:[UIImage imageNamed:@"icon_logo"]];
复制代码

获取当前模式（LightMode/DarkMode）

上面提到的颜色和图片，都是由系统来帮咱们完成切换的。可是在某些场景下，咱们须要根据当前的模式，来作一些其余的适配需求。

咱们能够在 UIViewController 或者 UIView 中调用traitCollection.userInterfaceStyle来获取当前视图的模式。

if (@available(iOS 13.0, *)) {
        UIUserInterfaceStyle style = self.traitCollection.userInterfaceStyle;
        if (style == UIUserInterfaceStyleLight) {
            ///TODO:...
        } else {
            ///TODO:...
        }
    }
    
复制代码

userInterfaceStyle 是iOS12出现的，可是暗黑模式是iOS13才有的，因此为了不没必要要的影响，咱们仍是加上@available(iOS 13.0, *) 的判断条件。

适当的时候咱们可能还须要在drawRect/layoutSubViews等方法中，根据当前的模式从新设定一些色值。

监听模式的切换（LightMode/DarkMode）

不管是LightMode仍是DarkMode，用户均可以切出APP，或者下拉控制中心浮层来随意切换，因此咱们还须要监听模式的切换。

在 UIView 和 UIViewController 中，当模式切换时，就会触发下面这个方法

- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    if (@available(iOS 13.0, *)) {
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
            ///TODO:...
        }
    } else {
        // Fallback on earlier versions
    }
}
复制代码

CGColor

对于CGColor，咱们可使用上述的获取当前模式和监听模式的方式来处理不一样的CGColor。

Status Bar

以前 Status Bar 有两种状态，default 和 lightContent

如今 Status Bar 有三种状态，default, darkContent 和 lightContent

如今的 darkContent 对应以前的 default，如今的 default 会根据状况自动选择 darkContent 和 lightContent

JDME中设置状态栏颜色的地方有不少，这个还得具体状况具体分析。

UIActivityIndicatorView

以前的 UIActivityIndicatorView 有三种 style 分别为 whiteLarge, white 和 gray，如今所有废弃。

增长两种 style 分别为 medium 和 large，指示器颜色用 color 属性修改。

NSAttributedString

对于UILabel、UITextField、UITextView，在设置NSAttributedString时也要考虑适配Dark Mode

Storyboard/Xib

xib中，系统提供了使用colorAssets的方式，相似于图片，可是为了兼容低版本，咱们仍是须要手动代码来更改颜色，单独适配。

第三方模块：

H5 App （WKWebview）

具体由第三方应用作适配

SDK

须要相关团队作适配。

Flutter Module （Calendar/Login）

尽管 Flutter 在 MaterialApp中提供了theme 与 darkTheme两个入口让咱们设置两种模式下的颜色及文字样式，可是仍是须要注意一些细节，提供的样式是否与设计师的要求一致。

注意，Flutter 1.9.1的版本并无适配iOS 13 Status Bar新增的UIStatusBarStyleDarkContent 。

ReactNative Module （JoySpace）

RN团队须要作适配。

对于设计师

设计师须要提供一套设计规范，做为底层颜色自动转换的映射表。咱们使用系统提供的方案，能够很快作到颜色转换来适配暗黑色模式。可是，有些颜色是须要单独配置的，不能彻底遵循底层的颜色转换，因此，每一个页面都须要设计人员验收，自动转换的颜色是否符合总体页面的UI效果，若是有变更，尽可能给出一份暗黑模式的标注图，而后咱们再作单独配置。因此，对于设计人员和开发须要适配的工做量仍是蛮大的。