実践的な iOS ダークモード対応のメモ(e-tideへの実装時)

  • 投稿:
  • 更新:2020年2月 3日
  • by
  • in

とまぁこんな感じで実装できましたが、いくつか面倒な(忘れちゃいそうな)実装があったのでメモしておきます。
iOS13に限定で、CALayerに直接作画してなくて、オープンソースのUIライブラリを使ってないなら、ネットで探せる情報だけで十分なのですが、この条件以外だともう少し細かなUIの調整が必要です。

大抵はUIViewの背景に UIColor.systemBackgroundColorを設定すればOSがよしなにしてくれるのですが、iOS12以下にも対応しているアプリでstoryboardでUIに直接カラー設定していると Color.Assetが指定できなかったりするので、カラーを切り替えたいUIをViewに接続して自前でカラーを設定しなくてはなりません。

CALayerで直接作画している処理があると、アプリ起動中に切り替えた場合、モードの切り替えを監視し、対象のレイヤーに「xx..setNeedsDisplay()」とかしないとダメです。
これは複数の画面遷移があると、アプリ全体で切替を監視し、各ViewControllerに通知する必要があります。BackgroundにあるViewControllerもアップデートしないといけないので。
このあたりは、リアクティブ(RxSwift等)なコーディングだとわりと楽に実装できます。

あとはUIライブラリ系。
初期設定でカラーを決定しているようなUIライブラリの場合は、ダイナミックな切替のタイミングで自前で更新しないとダメです。これが以外に面倒くさい…
Google Mapsなんかも同じですね。Google Mapsは最新のライブラリを利用しないとダークモードに対応してません。

ちなみに、この「e-tide」へのダークモードの実装ですが、カラー設定で1日位、コードの修正で3日位でした。主な画面数(ViewController)は4画面で、その他3つくらいポップアップ画面があります。

とりあえず、iOS/Android共にダークモード(ダークテーマ)への対応が解ったので、残りのアプリ「RS Station」「SurfTideΔ」へもボチボチ対応していこうかと思います。

他のアプリには対応予定はありませんが、iOS版のSurfTIde7は、OSがダークモードを取り入れるずいぶん前からナイトモードを実装していました。