More than 5 years have passed since last update.

実践 iOS13ダークモード対応

Last updated at 2019-10-20Posted at 2019-09-20

個人アプリをダークモード対応したので、その具体的な実装の流れとtipsについてまとめました。
※すでにDark Modeの概要や実装については知っている前提です。まだの方は文末の参考記事をご参照ください

Color Setを活用する

基本的にはハードコードしていた色指定をDynamic Colorに置き換える作業になります。

今まで色の指定はコードで定義していたのですが、ダークモード対応をきっかけにAssets CatalogのColor Set(iOS11~)に移行しました。

Color Setのメリットは以下のとおりです。

Storyboard Xib, codeで色が使える
Light, Darkの色指定が可能

ちなみにiOS13SDKのUIKitにプリセットされてるUI Element Colors (.systemBackgroundColorなど)も指定できます

Asset Catalogを新規作成し、画像のAssetsと色のAssetsは分けて管理すると見やすい

SwiftGenなどを使って、コードから参照する時にタイプセーフになるよう対応するとさらに便利。

#swiftgen.yml
xcassets:
  inputs:
   - ./FamilyReminder/Images.xcassets
   - ./FamilyReminder/Colors.xcassets
  outputs:
    - templateName: swift5
      output: ./FamilyReminder/Generated/Assets.swift

// 利用する時はこんな感じでタイプセーフに使える
closeButton.tintColor = Asset.Colors.primary.color

二重で管理する必要がなくなったので、すべての色指定をColor Assetsに移行し終わったタイミングで既存のコードでColor指定していたファイルは破棄しました。

Storyboard, Xib, codeで使えるし、ダークモード対応するなら、まずColor Assetに移行すると後の作業が捗ると思います。

UI Element Colorsをなるべく使う

iOS13SDKにプリセットされている、UI Element Colors(.systemBackgroundColorなど)を使うと自動で下記の対応をしてくれます。

色を指定するviewがmodalyかどうかで濃さを変えてくれる
iOS13以前の端末の場合、代替の色を指定してくれる(Color Set同様)
- .systemBackgroundColor の場合、whiteなど

純正のアプリをダークモードで見るとmodalは背景色が通常のviewの背景色より明るいことに気づきます。
これは1画面ずつ実装してるのではなく、UIKitが用意してくれている.systemBackgroundColor などが階層構造を把握して自動で処理してくれます。Viewがbase levelなのかelevated levelなのかで濃さが変わります。
(.secondarySystemBackground も .systemBackgroundColor の色に合わせて良しなにやってくれます)

view	modal

この機能がかなり便利なので、可能な限り、.systemBackgroundColor などを使った方が良いと感じました。ダークモード対応に必要な機能はすでに用意してくれているのでそれを活用したほうが良いです。
backgroundColorをカスタマイズしているアプリも多いと思うので、デザイナーとのコミュニケーションが必要な箇所でしょう。Appleが提供しているツールについて理解度を合わせることが大事でしょう。
僕はこれを機にTableViewが主体の画面などで独自に指定していた背景色を廃止し、 .systemBackgroundColor に統一しました。

ダーク/ライトの表示確認

Storyboard, Xibを使うと確認がラク

Storyboard, Xibを使ってレイアウトしている場合、IB上でダーク・ライトの簡易的な確認がビルドなしで出来ます。(IBの下のメニュー)

ビルド後は、Xcodeのメニューでリアルタイムに変更できます（実機/シミュレータ）

実機だとコントロールセンターにボタンを置くとパッと切り替えられます
設定 > コントロールセンター > コントロールセンターをカスタマイズ

微調整する

同僚のデザイナーに教えてもらったContrast Checkerで色の見分けやすさなど確認。
数値で判断できるので便利。
最終的にプライマリー色とdisabled色を少しビビットに微調整

作業完了までの時間は半日ちょっとくらい。画面数が20前後で自前でデザインも作ってるので、割と早くできたのだと思います。
むしろ色の指定をColor Setにするなどセマンティックな色指定にリファクタリングする作業に時間がかかりました。ダークモードは自分のアプリがセマンティックに色指定できているかどうか見つめ直す良い機会だと思います。

Color Set, UI Element ColorなどXcode上でセマンティックに色指定するツールは揃っているので、
業務でも全画面のデザインが必要？と言われると割と疑問で、主要な画面のデザインカンプがあれば、簡単にダークモード対応するツールは揃っているので直接IB.コードをいじってデザイナーと確認を取った方が早いと思います。