How to adapt dark mode in IOS development

Time:2021-9-18

Diablo mode

principle

  1. Use the same resource to create two modes of styles. The system automatically obtains the resources of the style according to the currently selected style
  2. Each time the system updates the style, the application will call all existing elements, call some corresponding redrawing methods, and redraw the view. You can make corresponding changes in the corresponding methods

Resource file adaptation

  1. Create an assets file (or in an existing assets file)
  2. Create a new picture resource file (or color resource file, or other resource file)
  3. Select the resource file, open the Xcode – > View – > inspectors – > show attributes inspectors (or option + Command + 4) view, and change the applications option to any, dark
  4. After the third step, the resource file will have multiple container boxes, namely any appearance and dark appearance. Any appearance is applied to the default (unspecified) and highlighted (light), and dark appearance is applied to the dark mode (dark)
  5. When the code is executed by default, it can be used normally by name. The system will automatically obtain the corresponding resource file according to the current mode

be careful

After multiple assets files in the same project are packaged, an assets.car file will be generated. Therefore, ensure that the names of resource files in assets cannot be the same

How to adapt color (uicolor) in code


+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);

e.g.


[UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trait) {
  if (trait.userInterfaceStyle == UIUserInterfaceStyleDark) {
    return UIColorRGB(0x000000);
  } else {
    return UIColorRGB(0xFFFFFF);
  }
 }];

The system calls the update method to customize the redraw view

When the user changes the appearance, the system will notify all windows and views that the style needs to be updated. During this process, IOS will trigger the following methods,Complete trigger method documentation

UIView


traitCollectionDidChange(_:)
layoutSubviews()
draw(_:)
updateConstraints()
tintColorDidChange()

UIViewController


traitCollectionDidChange(_:)
updateViewConstraints()
viewWillLayoutSubviews()
viewDidLayoutSubviews()

UIPresentationController


traitCollectionDidChange(_:)
containerViewWillLayoutSubviews()
containerViewDidLayoutSubviews()

How to adapt styles without system switching

be careful

Apple officials strongly recommend adapting to dark mode. This function is also for developers to slowly adapt their applications to dark mode

Therefore, if you do not want to adapt to the dark mode through this function, it is expected to be rejected

Global turn off dark mode

  1. In the info.plist file, add uiuserinterfacestyle key with the name of user interface style and the value of string,
  2. Set the value of uiuserinterfacestyle key to light

A single interface does not follow the dark mode

  1. Both uiviewcontroller and uiview add an attribute overrideuserinterfacestyle
  2. If overrideuserinterfacestyle is set to the corresponding mode, the element and its child elements are forcibly restricted to be displayed in the set mode and do not change with the change of system mode
    1. Setting this property of viewcontroller will affect the view and child view controllers of the view controller to adopt this style
    2. Setting this property of view will affect the view and all its sub views to adopt this style
    3. Setting this property of window will affect the style of all contents in the window, including the root view controller and all presentation controllers (uipresentationcontroller) that display contents in the window

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.