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構造体で変数を読み取り、ダークモード設定を適用して下さい。
ダークモードの設定に対しては分岐条件が存在するので、カスタム関数を書くことで変更を適用できます。
アプリがシステムの設定に従うようにしたければ、優先すべきカラースキームpreferredColorSchemeをnilに設定します。
ユーザーが常にダークモードを使用することを選択すれば、.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)
}
}
}
注意：優先配色が変更されると、アプリはデフォルトの画面に切り替わります。
完成したプロジェクト
完成したデモプロジェクトはこちらからダウンロードできます。
