【SwiftUI】アプリ内でダークモードに切り替える方法

概要

アプリ開発をしていて、アプリ内の設定画面からライトモードやダークモードに切り替える機能が欲しくなりました。

そこで自分なりに調べた方法を簡単にまとめます。

筆者はSwift歴1年ちょっとの初学者です。よって間違ったコードや知識があるかもしれません。もし間違いを発見しましたら、ご指摘いただけると幸いです。

環境

• M1 macOS Ventura 13.1
• Xcode 14.3
• Swift 5.8

動作

実装例

AppearanceModeSetting

enum AppearanceModeSetting: Int {
    case followSystem = 0
    case lightMode = 1
    case darkMode = 2
    
    var colorScheme: ColorScheme? {
        switch self {
        case .followSystem:
            return .none
        case .lightMode:
            return .light
        case .darkMode:
            return .dark
        }
    }
}

ここでは見た目を設定するためのEnumを定義しています。
数値を持っているのは、後々@AppStorageで値を取得し、rawValueで指定するためです。

ColorScheme型は、ライトモードかダークモード化を指定するための型です。

テーマ変更画面

struct TheamConfigurationView: View {
    @AppStorage(wrappedValue: 0, "appearanceMode") var appearanceMode
    var body: some View {
        Form {
            Picker("Appearance Setting", selection: $appearanceMode) {
                Text("システムに合わせる")
                    .tag(0)
                Text("ライトモード")
                    .tag(1)
                Text("ダークモード")
                    .tag(2)
            }
            .pickerStyle(.inline)
        }
    }
}

この画面でライトモードかダークモードかを指定します。
この場合デフォルトはシステムに合わせるになっています。

App構造体

@main
struct MyApp_App: App {
    @AppStorage(wrappedValue: 0, "appearanceMode") var appearanceMode
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .preferredColorScheme(AppearanceModeSetting(rawValue: appearanceMode)?.colorScheme)
        }
    }
}

@AppStorageでInt型の値を取得して、preferredColorSchemeでAppearenceSettingのcolorShemeを指定しています。

まとめ

@AppStorageをうまく活用すれば、意外と簡単に実装できます。

個人的にはライトモードとダークモードは、アプリごとに設定したいので、この機能があるととても嬉しいと思います。

最後まで読んでいただきありがとうございました！😊

参考にした記事

↑コードの大枠はほとんどこちらの記事を参考にさせていただきました。
しかしこの記事のコードだとダークモードに切り替えた途端に画面が戻ってしまうため、その辺を本記事で修正しました。