【Xcode/SwiftUI】

デバイスのダークモードを無効化してアプリをライトモードで表示する方法

Xcodeの設定で常にライトモードで表示する

投稿日 2022/01/31 更新日 2022/01/31


こんにちは。当サイトの管理者「元木皇天」です。

iOS13から追加された新機能にダークモードというものがあります。

しかし、アプリ開発者からするとなかなか厄介な機能です。

というのも、デバイス設定をダークモードにすると見た目が変わってしまい、せっかく作成して配色などを整えたアプリが場合によっては使いづらくなってしまうからです。 (私がリリースしたアプリもダークモードで表示したら微妙な見た目になってしまっていました。。)

今回はそんなお悩みを持つ人向けに、SwiftUIでダークモードを無効にして、ライトモードのままで表示させる方法について解説いたします。

環境
OS:MacOS Big Sur
Xcode:バージョン13.2
Swift:バージョン5.3

やりたいこと

ダークモードを無効化する

以下の例のようにダークモードを無効化してライトモードでアプリを表示する。

ダークモード無効化設定の前と後のアプリ画面の比較

参考文献
info.plist uiuserinterfacestyle Apple Developer Site
Apple iOS 13 のアップデートについて Apple Official Site

ダークモードとは

iPhoneのダークモードとは、iOS13から導入された表示モードの一つで、iPhone画面全体の色を黒を基調とした配色に変更することができる機能です。

詳細についてはAppleの公式サイトにて説明されています。

以下のリンクを参照してください。

Apple iOS 13 のアップデートについて

uiuserinterfacestyle/Appearanceについて

iPhoneの設定に関わらず、アプリ内の表示をライトモードまたはダークモードに固定するには、info.plistのkeyにuiuserinterfacestyleまたはAppearanceを設定することで実現できます。

KeyであるuiuserinterfacestyleまたはAppearancに設定できる値には以下の3つの値があります。


Automatic
デフォルト値。デバイスの設定に合わせてライトモード・ダークモードに切り替える。 info.plistにこのKeyを設定していない場合、自動でこの値が反映される。

Light
デバイスの設定がダークモードであっても、アプリでは常にライトモードで表示される。

Dark
デバイスの設定がライトモードであっても、アプリでは常にダークモードで表示される。

--補足--

今回の説明で「uiuserinterfacestyle/Appearance」と記載しましたが、実際は「Appearance」のみしかinfo.plistには設定できなくなっています。

というのも、実際info.plistに「uiuserinterfacestyle」を入力すると、自動で「Appearance」に変換されるようになっています。 (しかし、Appleの公式ドキュメントにはなぜかuiuserinterfacestyleとしてしかドキュメントがないです。。)

詳細は分かりませんが、おそらく元々は「uiuserinterfacestyle」というKeyの名称を使用していたのでしょうが、途中で名称を「Appearance」に変更したのではないかな〜と個人的には考えています。

気になる方は試しに入力して、自動で「Appearance」に変換されるのを確認してみてください。

ダークモードを無効化してアプリを表示する方法

デバイスのダークモードの設定を無効化して、アプリをライトモードで表示させるには、先ほども少しお話ししたように、info.plistに値を設定することでできます。

手順は以下の通りです。

1.info.plistに新しい行を追加する。

2.Keyに「uiuserinterfacestyle」または「Appearance」を入力する。

3.Typeに「String」を設定する。

4.Valueに「Light」を設定する。

実際に設定すると以下のようになります。

info.plistにuiuserinterfacestyleまたはAppearanceを設定した画像

この状態でデバイスをダークモードにしてアプリを開くと、ライトモードで開けていることが確認できます。

ダークモードに設定している画像 ダークモード無効化設定の前と後のアプリ画面の比較

まとめ

SwiftUIでデバイスのダークモードを無効化してアプリをライトモードで表示するには
info.plistの「uiuserinterfacestyle」または「Appearance」のKeyに「Light」値を設定しましょう。

参考文献・おすすめ文献

元木皇天

化学系大学出身
現在は3年目SEとして
日々がんばっています

Twitter