8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

はじめに

iOSアプリ作成初学者の方が下記のようにHello worldをやったとします。

  1. Xcodeでプロジェクトを作成
  2. StoryboardのViewControllerにUILabelを設置
  3. シミュレーターで起動

やった表示できた!!よし実機でも見てみよう!!

あれっ!?UILabelが・・・消えた・・・!

それ、Dark Modeのせいかもしれもません。

Dark Modeの対応

私が担当していたアプリは今回予算や時間の問題でDark Modeの対応はなくなりましたが何も対応しなくていいわけではありません。何もしないと冒頭のようなことが起こりえます。

これはUIViewの背景色がwhite、UILabelの文字色がdefaultの時に起こります。

ダークモードにするとUIViewの背景色はそのままwhiteで表示され、UILabelの文字色は白っぽくなり見事に背景と同化してUILabelが見えなくなります。

Light Mode専用にする

Info.plistに下記を追記してDark Mode非対応にしました。

<key>UIUserInterfaceStyle</key>
<string>Light</string>

これで完了と思いきや思わぬ不具合が!?

Status Barを設定する

上記の対応で全画面対応できたと思ったのですが、ダークモードの時にステータスバーが白っぽくなって見えにくくなるという現象に遭遇しました。

今手元では再現しないのですが、とりあえずInfo.plistに下記を追記して対応しました。

<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

(たしかXcode11.1だったような気がするんですが...)

Flutterで同じ現象に遭遇している方がいらっしゃいました。

【Flutter編】ダークモードをONにすると status barが白くなる件 について

その他の現象

その他Dark Modeの影響で起こる現象についてもメモしておきます。

私は今回Dark Mode対応しなかったので遭遇しませんでしたが、上記のような現象もあるようです。

Dark Modeの確認

シミュレータで確認する場合はEnvironment Overridesが便利。

Environment_Overrides

わざわざ設定アプリで変更しなくても上記のようにLightとDarkを切り替えることができます。(他にもアクセシビリティ関連のものが切り替えれるようです。)

さいごに

ついに登場したDark Mode!!嬉しいことですが、ちゃんと対応しようと思うとなかなかしんどそうです...

現在は対応必須ではないですが、後々必須になるかもとの噂もあるそうです。
公式のドキュメントにも下記のような記載があります。

Important

Supporting Dark Mode is strongly encouraged. Use the UIUserInterfaceStyle key to opt
out only temporarily while you work on improvements to your app's Dark Mode support.

余裕があるうちにちょこちょこ対応していった方が良さそうです:sunglasses::sunglasses::sunglasses:

8
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?