WWDC2019-214-iOS 13 adapted dark mode

Dark Mode

Reference links:

WWDC 2019-Implementing Dark Mode on iOS

Reource-Adopting iOS Dark Mode

First, the principle

The state UITraitCollectionchange the transfer process from the screen to view the current support and manual trigger automatic trigger. If the view of the dynamic color and dynamic image, the view of color and image will change accordingly.

The current situation calls change UITraitEnvironment(iOS 8)the method of agreement, the need for a separate adaptation of View, ViewController requires some special treatment in this method, UIView, UIViewController both compliance with that agreement

- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    [super traitCollectionDidChange:previousTraitCollection];
    
    // 对比情景改变
    BOOL isChanged = [traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection];
}
复制代码

LayoutSubView, ViewController of viewDidLayoutSubviews View will trigger a traitCollectionDidChange:method

Second, related to adaptation

1. Dynamic Color

   Dynamic color, the color is changed according to the current scenario, iOS 13 defines a number of new dynamic color, beginning with most System, also beginning to apply category, for example labelColor,systemGroupedBackgroundColor, can be used directly

   • Custom dynamic color

     // iOS 13
     UIColor *dynamicColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitC) {
             if (traitC.userInterfaceStyle == UIUserInterfaceStyleDark) {
                 return UIColor.redColor;
             } else {
                 return UIColor.greenColor;
             }
         }];
     复制代码

   • The current scene color values ​​extracted dynamic color values ​​in the color according to different scenarios takes ---- color value set.

     UIColor *dynamicColor = [UIColor systemBackgroundColor];
     UITraitCollection *traitCollection = someView.traitCollection;
     UIColor *resolvedColor = [dynamicColor resolvedColorWithTraitCollection:traitCollection];
     复制代码

     Use Example:

     		// 设置 view 的 border 颜色
     		UILayer *layer = [UILayer new];
     
     		UITraitCollection *traitCollection = someView.traitCollection;
     
     		// option 1 -- iOS 8
     		UIColor *resolvedColor = [dynamicColor resolvedColorWithTraitCollection:traitCollection];
     		layer.borderColor = resolvedColor.CGColor;
     
         // option 2 -- iOS 13
         [traitCollection performAsCurrentTraitCollection:^{
             layer.borderColor = resolvedColor.CGColor;
         }];
         
         // option 3 -- iOS 13
         UITraitCollection *savedTraitCollection = [UITraitCollection currentTraitCollection];
         
         [UITraitCollection setCurrentTraitCollection:traitCollection];
         layer.borderColor = UIColor.labelColor.CGColor;
         
         [UITraitCollection setCurrentTraitCollection:savedTraitCollection];
     复制代码

2. Dynamic Image

   • Creating dynamic image

3. webContent

   • Use color-scheme to declare support
   • Adopt prefers-color-scheme media query
   • Use for hero graphics
   • Consider using var() for color schemes

Distal Code Example: See the WWDC the Resource

// 色值
:root {
  color-scheme: light dark; 
  --post-title-color: #333;
  --header-bg-color: #593a78;
  --header-txt-color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
  --post-title-color: white;
  --header-bg-color: #513d66;
  --header-txt-color: #eee;
  }
}

h1 {
color: var(--post-title-color);
}
.header {
background-color: var(--header-bg-color);
color: var(--header-txt-color);
}

// 图片
<img src="mojave-day.jpg">

<picture>
  <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
  <img src="mojave-day.jpg">
</picture>

复制代码

Third, debugging

Set the startup parameters Enable debug logging with launch argument

-UITraitCollectionChangeLoggingEnabled YES

Reproduced in: https: //juejin.im/post/5cff7a12f265da1b7152ec02