More than 5 years have passed since last update.

ダークモード対応で今注意すべきこと

Last updated at 2019-10-10Posted at 2019-10-01

この記事は potatotips #65 で発表した内容を一部テキスト化したものです。

ダークモード対応で注意すべきことの発表資料です。
Macをダークモードにして作業している方必見ですhttps://t.co/oZsGhNqvg7 #potatotips
— たなたつ (@tanakasan2525) October 1, 2019

2019/10/10追記
Xcode 11.2 Beta版で確認したところ、こちらの問題は直っているようでした！
https://developer.apple.com/documentation/xcode_release_notes/xcode_11_2_beta_release_notes

The host system’s appearance no longer affects which fallback color is archived for an adaptive asset catalog color. (55570108)

TL;DR

iOS 12 以下をサポートしつつ、ダークモード対応するなら、Mac をライトモードにしたほうが良いかもしれません。
ダークモードの Mac で xib/Storyboard を編集すると Asset Catalog で作成した色の RGB がダークモードの色になり、iOS 12 以下でダークモードの色が表示されるケースがあります。

xib/Storyboard に Asset Catalog で作成した色を設定した後で、その色を編集しても色の変更が View に反映されない可能性があります。 (iOS 12 以下のみ)

動作確認環境

macOS Mojave 10.14.6
Xcode 11.0 (11A420a)

この内容は環境に依存している可能性が高いため、記載しておきます。
もし、Catalinaなら直ってるよ、などの知見がある方はコメントいただけると嬉しいです！

iOS 12 以下でダークモードの色が表示されてしまう

iOS 13 で動作確認をしながらダークモード対応を進め、ある程度進んだ段階で iOS 12 の端末で確認をすると、何故か一部の色がダークモードで表示されていました

色々検証していく中で以下の問題が分かりました。

Mac をダークモードにしていると、xib/Storyboard に埋め込まれるカスタム色 ¹ の RGB がダークモードの色になる
- iOS 13 では外観モードに合わせた正しい色が表示されるが、 iOS 12 以下では埋め込まれた色が表示されてしまうケースがある
xib/Storyboard にカスタム色を設定した後、 Asset Catalog でその色を編集しても View 側の色が変わらない (iOS 12 以下のみ)

Mac をダークモードにしていると、xib/Storyboard に埋め込まれるカスタム色の RGB がダークモードの色になる

このような色を作成します。名前は DynamicColor とします。ライトモードの時は赤、ダークモードの時は青が表示されるはずです。

この色を Mac がライトモードの時に xib/Storyboard 内の View に設定すると以下のような色が埋め込まれます。

<resources>
    <namedColor name="DynamicColor">
        <color red="1" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
    </namedColor>
</resources>

一方、Mac がダークモードの時に設定すると以下のような色になります。

<resources>
    <namedColor name="DynamicColor">
        <color red="0.0" green="0.0" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
    </namedColor>
</resources>

本来関係ないはずの Mac 本体の外観設定が iOS のリソースに反映されてしまっています...
これだけでもチーム内でライト派/ダーク派が分かれている場合、Git の差分を見るのが辛くなります...

続いて、以下のような View を用意します。単に IBInspectable で背景色を設定できる View です。 (検証用なので無駄なコードです)

class View: UIView {
    @IBInspectable var ibBackgroundColor: UIColor = .white {
        didSet {
            backgroundColor = ibBackgroundColor
        }
    }
}