9
4

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 1 year has passed since last update.

【Swift】アプリ内で外観(ライトモード・ダークモード)を変更するあれこれ

Posted at

外観を変更する要件は以下の3つかなと思います。

  1. アプリ全体で固定で適応する
  2. アプリ内で変更でき、変更をアプリ全体に適応する
  3. 画面単位で変更する

1. アプリ全体で固定で適応する

アプリ全体に固定の設定を適応させたい場合はinfo.plistに設定を記します。

info.plist
<key>UIUserInterfaceStyle</key>
<string>Automatic</string>

設定できる値はAutomaticLightDarkの3種類です。Automaticの場合はアプリのシステム設定に準拠します。

2. アプリ内で変更でき、変更をアプリ全体に適応する

アプリ内で動的に外観の設定を適応させることができます。その場合は以下のコードを記述するとアプリ全体に反映されます。

let scenes = UIApplication.shared.connectedScenes
let windowScene = scenes.first as? UIWindowScene
let window = windowScene?.windows.first
window?.overrideUserInterfaceStyle = .unspecified

設定できる値はunspecifiedlightdarkの3種類です。unspecifiedの場合はアプリのシステム設定に準拠します。

この実装はフレームのレンダリングが完了してから行う必要があるので、アプリで最初に表示されるViewの初期化の処理とかで行うと良いです。 つまりAppDelegate.didFinishLaunchingWithOptionsで設定しても反映されないです。
*フレームのレンダリング

3. 画面単位で変更する

アプリ全体の設定から特定の画面のみ変えたい場合はUIKitとSwiftUIで実装が異なります。

  • UIKitの場合以下の実装をViewControllerで記述します。
    設定できる値は上記同様にunspecifiedlightdarkの3種類です。
overrideUserInterfaceStyle = .light
  • SwiftUIの場合は以下の実装を設定を変更したい画面のトップのコンポーネントに記述します。
    この場合VStack以下の画面に設定が適応されます。
    設定できる値はnillightdarkの3種類です。nilの場合はアプリのシステム設定に準拠します。
VStack {

}.preferredColorScheme(nil)
9
4
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
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?