Disable DarkMode globally

This is the current solution, let the APP always keep LightMode, in the info.plsit file, add UIUserInterfaceStyle with a value of Light.

To adapt DarkMode, we need to delete the UIUserInterfaceStyle.

UIColor

Before iOS13, UIColor can only represent one color. From iOS13 onwards, UIColor is a dynamic color. You can set different colors in LightMode and DarkMode respectively.

1. First of all, the system provides us with some dynamic colors. Using these dynamic colors, the system directly completes the adaptation work for us. However, if the color provided by the system does not conform to the design specification of APP, we will not use it under normal circumstances.
@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); . .Copy the code
2. Customize dynamic informationUIColor
UIColor *textDyColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
      if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
          return [UIColor JMEColorWithHexString:@"#2E2D2D"];
      } else {
          return [UIColoryellowColor]; }}]; _nameLabel.textColor = textDyColor;Copy the code

When the system switches DarkMode/LightMode, it calls (UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider block and automatically updates the color for us.

Image resources

JDME currently uses Assets. Xcassets to manage images, which is more convenient to adapt to DarkMode.

Open assets. xcassets and set Appearance to Any,Dark

Drag the DarkMode footage provided by the designer into the appropriate location and use the image as usual.

[_logoImage setImage:[UIImage imageNamed:@"icon_logo"]].Copy the code

Get current mode (LightMode/DarkMode)

All the colors and pictures mentioned above are switched by the system. However, in some scenarios, we need to make some other adaptation requirements based on the current pattern.

We can call in UIViewController or UIView traitCollection. UserInterfaceStyle for the current view mode.

    
    if (@available(iOS 13.0, *)) {
        UIUserInterfaceStyle style = self.traitCollection.userInterfaceStyle;
        if (style == UIUserInterfaceStyleLight) {
            ///TODO:.
        } else {
            ///TODO:.}}Copy the code

UserInterfaceStyle is available in iOS12, but dark mode is only available in iOS13, so to avoid unnecessary impact, we will add @available(iOS 13.0, *).

If appropriate, we may also need to reset some color values in methods such as drawRect/layoutSubViews based on the current mode.

Switch listening mode (LightMode/DarkMode)

Regardless of LightMode or DarkMode, users can cut out the APP or pull down the floating layer of the control center to switch at will, so we also need to monitor the mode switch.

In UIView and UIViewController, when modes are switched, the following method is triggered

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

CGColor

For CGColors, we can use the above method of getting the current mode and listening mode to handle different CGColors.

Status Bar

Previously, the Status Bar had two states, Default and lightContent

The Status Bar now has three states, Default, darkContent and lightContent

The current darkContent corresponds to the previous default, which automatically selects darkContent and lightContent as appropriate

In JDME, there are many places to set the color of the status bar, and this is a case-by-case scenario.

UIActivityIndicatorView

The previous UIActivityIndicatorView had three styles whiteLarge, White, and Gray, now all obsolete.

Add two styles, medium and large, and change the indicator color with the color attribute.

NSAttributedString

For UILabel, UITextField, and UITextView, you should also consider adapting Dark Mode when setting NSAttributedString

Storyboard/Xib

In XIB, the system provides the way to use colorAssets, which is similar to the picture, but in order to be compatible with the lower version, we still need manual code to change the color and adapt it separately.

Third-party modules:

H5 App (WKWebview)

Specific third-party applications do the adaptation

SDK

It needs to be adapted by relevant teams.

Flutter Module (Calendar/Login)

Although Theme and darkTheme entries provided by Flutter in the MaterialApp allow us to set colors and text styles for the two modes, we still need to pay attention to some details to see if the styles provided by Flutter are consistent with the designer’s requirements.

Note that Flutter 1.9.1 version is not fit 13 Status Bar new iOS UIStatusBarStyleDarkContent.

ReactNative Module (JoySpace)

RN teams need to adapt.

For designers

Designers need to provide a set of design specifications as a mapping table for the underlying automatic color transformation. Using the scheme provided by the system, we can quickly convert the color to match the dark color mode. However, some colors need to be configured separately and cannot completely follow the underlying color conversion. Therefore, each page needs to be checked and accepted by designers to see if the color automatically converted conforms to the UI effect of the whole page. If there is any change, try to provide a label map of the dark mode, and then we can do the separate configuration. Therefore, for designers and development needs to adapt the workload is quite large.