【Xcode】ダークモードでの表示を確認する

人間の心の中には、天使と悪魔がいると聞いたことがありますが、iPhoneもダークモードとライトモードという二面性を持っています。今回は、そのダークモード時の表示を確認する方法を調べたので記事にしました。

ダークモードとは

黒を基調とした画面モードのことで、Apple公式のHow to use Dark Mode on your Macによれば、ダークモードは目に優しい外観で、暗いコントロールとウィンドウが背景になることでコンテンツが目立ち、作業に集中しやすくなるとのこと。

iPhone、iPad、iPod touch でダークモードを使うでは、周囲が暗くても画面が見やすくなるという利点が記述してありました。

iPhoneユーザーもこの画面モードをダークモードとライトモードを自由に切り替えることが出来ます。アプリ側でダークモード非対応にする処理や静的カラーのみを使用することでダークモード対応を回避することが出来ますが、今回はダークモード対応アプリという前提としてダークモード中の画面の表示を確認する方法について記載していきます。

環境

• Xcode 13.3

準備

今回は背景色と画像もライトモードとダークモードによって切り替えれるようにします。

ダークモード用の画像をセット

Assets.xcassetsに画像を追加して、Appearancesで、Any, Dark または Any, Light, Darkを選択し、ダークモード時に表示したい画像とライトモード時に表示したい画像をセットします。

背景色

今回はダイナミックカラーUIColor.systemBackgroundを使用します。

UIColor.systemBackgroundはライトモードでは白で表示され、ダークモードでは黒で表示されるカラーです。

ContentView

背景色と前面に画像を配置したシンプルなViewです。

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color(UIColor.systemBackground))
                .ignoresSafeArea()

            Image("face")
                .resizable()
                .frame(width: 300, height: 300)
        }
    }
}

プレビュー

特に何も設定していない為、ライトモード時の表示になっています。

このままではダークモード時にどう表示されるか確認出来ていない為、表示を確認していきます。

シュミレーターで確認する

まずは、シュミレーターを立ち上げます。

Toggle Appearance

シュミレーター立ち上げ後に、Simulator > Features > Toggle Appearanceを押すことでモードを切り替えることが出来ます。

ショートカットキー shift + command + A でも瞬時に切り替えることが出来ます。

Environment Overrides

シュミレーター立ち上げ後に、Xcode下部にあるツールバーのEnvironment Overridesを開き、Appearanceを切り替えることで画面モードを切り替えることが出来ます。

WWDC19: Debugging in Xcode 11の発表では、SwiftUIのプレビューでもDebug Preview使えるとのことだったが、Xcode13.3時点ではDebug Previewは廃止されており、シュミレーターでの利用に限定されているようです。

プレビューで確認する

シュミレーターで確認する方法だと、シュミレーターを立ち上げないと確認出来ません。しかし、SwiftUIのプレビューでenvironmentというView Modifierを使用することで開発を進めながら確認することが出来ます。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.colorScheme, .light)

        ContentView()
            .environment(\.colorScheme, .dark)
    }
}

第一引数には、WritableKeyPathとしてcolorSchemeを設定しており、第二引数には、ColorSchemeのcaseとして画面モードを設定しています。

これでライトモードとダークモード状態を確認しながら開発を進めることが出来るようになりました。

設定から切り替える

ちなみにiPhoneの設定から画面モードを切り替えるには、設定 > 画面表示と明るさ > 外観モード　を切り替えることで変更出来ます。

おわりに

今回ダークモードについて調べていく中で、ダークモードのメリットが気になり少し調べてみました。

Appleによれば、ダークモードは「仕事に集中し続けるのを容易にする」ような記述はありました。しかし、Appleの記事ではありませんがWait, is dark mode actually bad for productivity?の中ではまた違った観点でダークモードについて書かれていたのでいくつか文章を抜粋したいと思います。

暗いテキストが明るい背景に表示された場合、逆の状態よりも多くのエラーを検出したり、より速く読んだりしました。

調査によると、ほとんどの人にとって、生産性の向上にはつながらず、どちらかといえば生産性がわずかに低下する可能性があります。

ダークモードは本当にクールに見えます、そしてそれは人々を幸せにします。私にとって、これは潜在的な欠点があるとしても、それを使用するのに十分な理由です。

明るい環境では、ライトモードは目にやさしく、生産性を高めることができます。ダークモードが好きなら、それを使ってください！明るい環境でも、その外観を好み、画面の読み取りに問題がない場合は、ダークモードを使用してください。

ダークモードは、暗い環境では最適ですが、日中はそれほど適していません。妥協案の1つは、日中はライトモードを使用し、夜はダークモードを使用することです。

こちらの記事は2019年11月4日のものなので、もしかすると新しい研究結果やまた他の方の違った見解もあるかもしれませんが、一情報として面白かったので共有させていただきました。文章だけを記事から引用しているので、詳細についてはリンク先の記事を読んでいただければと思います。

もし、公式の情報や最新の情報でダークモードのメリットの情報がありましたら教えていただければ嬉しいです。

とりあえず、iPhoneはダークモードでも心はライトモードで元気にやっていきたいと思います。

参考

• ヒューマンインターフェイスガイドライン: ダークモード
• iPhone、iPad、iPod touch でダークモードを使う
• WWDC19: Implementing Dark Mode on iOS
• environment(::)