WWDC2019-214：IOS 13が暗いモードに適応しました

ダークモード

参考リンク：

iOSのWWDC 2019-実装ダークモード

Reource-採用のiOSダークモード

まず、原則

状態は、UITraitCollection現在サポートし、手動トリガー自動トリガーを表示する画面から転送処理を変更します。ダイナミックカラー及び動画像を表示する場合、カラー画像のビューは、それに応じて変化します。

現在の状況コールは、変更UITraitEnvironment(iOS 8)契約の方法、ビューの別の適応のための必要性、のViewControllerは、この方法では、いくつかの特別な処理を必要とし、UIViewの、のUIViewControllerにその契約に両方の順守を

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

LayoutSubView、viewDidLayoutSubviewsビューののViewControllerをトリガーするtraitCollectionDidChange:方法を

第二に、適応に関連します

1. ダイナミックな色

   動的色、色が現在のシナリオに応じて変更され、IOSの13は、例えば、また、カテゴリを適用し始め、ほとんどのシステムで始まり、新しい動的色の数を定義しlabelColor,systemGroupedBackgroundColor、直接使用することができ

   • カスタム動的な色

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

   • 色の値は、異なるシナリオに応じた色で動的色値を抽出し、現在のシーンが----カラー値セットを取ります。

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

     使用例：

     		// 设置 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. 動的な画像

   • ダイナミックなイメージを作成します

3. Webコンテンツ

   • サポートを宣言するカラースキームを使用します
   • 好む-配色のメディアクエリーを採用
   • ヒーローのグラフィックスに使用します
   • カラースキームのためのVAR（）を使用することを検討してください

遠位コード例：WWDCを参照してくださいリソース

// 色值
: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>

复制代码

第三に、デバッグ

起動パラメータは、起動引数でデバッグログを有効に設定してください

-UITraitCollectionChangeLoggingEnabled YES

ます。https：//juejin.im/post/5cff7a12f265da1b7152ec02で再現