iOS 12以下でDark Modeに対応した地獄の話 #iosdc #a #b/dark_mode_iosdc_2019

249b3122eee454c0a818bfe7851418e4?s=47 fromkk
September 07, 2019

iOS 12以下でDark Modeに対応した地獄の話 #iosdc #a #b/dark_mode_iosdc_2019

# iOS 12以下でDark Modeに対応した地獄の話

TimersでiOSエンジニアをしている植岡和哉と申します。Twitter, Github, Qiitaなどは全てfromkkでいう名前で活動しています。
WWDC 2019でiOS 13向けにDark Modeが発表されました。
・Dark Modeは暗い背景に明るいテキストやコンテンツを表示するカラースキームの事を言います。カスタムカラーを利用する場合はコントラスト比4.5:1〜7:1を目指すと良いらしいです。
・目やバッテリーに優しいとされています。特に夜間に明るい画面は見たくないですね。
・iOS 13ではLight Mode、Dark Modeそれぞれに色の微調整が行われています。ちなみに色に名前や役割を付けてアプリ上で扱いやすくする事をセマンティックカラーと呼びます。
僕が個人的に開発している# Typeというアプリにダークモード機能を追加しました。設定画面からON/OFFするとアプリ全体の色が変更されます。

## Dark Modeを自分で実装する時の考え方

色を整理します。セマンティックカラーを意識してアプリ全体で利用する色を管理します。
UIからのイベントを受け取ります。
UIが変更された事を受け取ってアプリ全体で管理している色のモードを変更します。
モードが変更された事を検知してUIに反映させる
ColorSetというライブラリを開発しました。
https://github.com/fromkk/ColorSet
色の種類が変更された事を検知してUIに色を設定する事を簡素化出来るライブラリです。subscribeとbindというメソッドを使い分ければある程度柔軟に利用が可能かと思います。
よかったらスターください!
ここまでで対応方法は大体わかりましたね。実際のプロダクトに適用してみよう!と思ったのが地獄の始まりです。
(以下地獄絵図)

## 簡単に対処方法

Interface Builderやコードでの色の直接指定は禁止です。
動的変更に対応出来る様にしましょう。
Appearanceの指定で済むならそれが一番良いです。
画像が既存の背景色を前提としている場合は差し替えましょう。
差し替えが出来ない画像はイベントハンドリングで対応します。
アイコンの様な一色の画像はtintColorを設定すれば色が変わる様にします。
ステータスバーはモードが変更された時に更新する様にします。

# まとめ

・最初は色変更ぐらいで済むかと思っていたら、想像以上に対応しないといけない箇所が出てきて大変でした。
・特に元々背景色が白のアプリだと、背景色が指定済みかどうかが分りづらいです。。背景も意識して設定する事が大事だと思いました。
・縦や横画面、iPadでのSplit Viewなど様々な画面の確認が必要でした。全画面網羅のUIテストとスクリーンショットが求められます。

249b3122eee454c0a818bfe7851418e4?s=128

fromkk

September 07, 2019
Tweet