8
Help us understand the problem. What are the problem?
Organization

SwiftUIアプリにダークモード設定を追加する

SwiftUIアプリに、ユーザーがダークモードの設定を選ぶことができるプリファレンス設定を加えることができます:システムのスタイルに従うか、常にダークモードを使用するか、常にライトモードを使用するかを選択できます。

ユーザーデフォルトへのユーザーの環境設定の保存(@AppStorageを使用)

ユーザーは、iOSシステムに追従するダークモード、常にダークモード、または常にライトモードを設定できます。

enum DarkModeSetting: Int {
    case followSystem = 0
    case darkMode = 1
    case lightMode = 2
}

ユーザーのプリファレンス設定を確定したり取得したりするには、appearanceModeと呼ばれる変数を使用することができます:

// import SwiftUI
@AppStorage(wrappedValue: 0, "appearanceMode") var appearanceMode

プリファレンス設定を追加

設定表示でプリファレンス設定を追加できるようになりました

Picker("Appearance setting", selection: $appearanceMode) {
    Text("Follow system")
        .tag(0)
    Text("Dark mode")
        .tag(1)
    Text("Light mode")
        .tag(2)
}

ユーザー設定を適用し、好みのカラースキームを設定

App構造体で変数を読み取り、ダークモード設定を適用して下さい。

ダークモードの設定に対しては分岐条件が存在するので、カスタム関数を書くことで変更を適用できます。
アプリがシステムの設定に従うようにしたければ、優先すべきカラースキームpreferredColorSchemenilに設定します。
ユーザーが常にダークモードを使用することを選択すれば、.darkに設定します。
ユーザーが常にライトモードを希望すれば、.lightに設定します。

import SwiftUI

@main
struct SwiftUI_Toggle_DarkModeApp: App {

    @AppStorage(wrappedValue: 0, "appearanceMode") var appearanceMode

    var body: some Scene {
        WindowGroup {
            ContentView()
                .applyAppearenceSetting(DarkModeSetting(rawValue: self.appearanceMode) ?? .followSystem)
        }
    }

}

extension View {
    @ViewBuilder
    func applyAppearenceSetting(_ setting: DarkModeSetting) -> some View {
        switch setting {
        case .followSystem:
            self
                .preferredColorScheme(.none)
        case .darkMode:
            self
                .preferredColorScheme(.dark)
        case .lightMode:
            self
                .preferredColorScheme(.light)
        }
    }
}

注意:優先配色が変更されると、アプリはデフォルトの画面に切り替わります。

完成したプロジェクト

完成したデモプロジェクトはこちらからダウンロードできます。


:relaxed: Twitter ツイッター @MszPro

:sunny: 私の公開されているQiita記事のリスト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What are the problem?