在 SwiftUI App 中实现暗模式切换

Question

我目前正在我的应用程序中查看暗模式。虽然由于我的 SwiftUI 基础，暗模式本身并没有太大的困难，但我正在努力设置独立于系统 ColorScheme 的 ColorScheme 的选项。

I found this in apples human interface guidelines 我想实现这个功能。 （链接：Human Interface Guidelines）

知道如何在 SwiftUI 中执行此操作吗？我发现了一些关于@Environment 的提示，但没有关于这个主题的更多信息。 （链接：Last paragraph）

Answer 1

单一视图

要更改单个视图的配色方案（可能是应用的主要ContentView），您可以使用以下修饰符：

.environment(\.colorScheme, .light) // or .dark

或

.preferredColorScheme(.dark)

此外，您可以将其应用于ContentView 以使您的整个应用程序变暗！

_{假设您没有更改场景委托中的 ContentView 名称或 @main}

---

整个应用程序（包括UIKit 部分和SwiftUI）

首先您需要访问窗口以更改在UIKit 中调用UserInterfaceStyle 的应用程序colorScheme。

我在SceneDelegate中使用过这个：

private(set) static var shared: SceneDelegate?

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    Self.shared = self
    ...
}

然后你需要绑定一个动作到切换。所以你需要一个模型。

struct ToggleModel {
    var isDark: Bool = true {
        didSet { 
            SceneDelegate.shared?.window!.overrideUserInterfaceStyle = isDark ? .dark : .light 
        }
    }
}

最后，你只需要切换开关：

struct ContentView: View {
     @State var model = ToggleModel()

     var body: some View {
         Toggle(isOn: $model.isDark) {
             Text("is Dark")
        }
    }
}

---

来自应用程序的 UIKit 部分

每个UIView 都可以访问该窗口，因此您可以使用它将. overrideUserInterfaceStyle 值设置为您需要的任何方案。

myView.window?.overrideUserInterfaceStyle = .dark

Answer 2

使用@AppStorage切换暗模式的演示

PS：全局切换，需在WindowGroup/MainContentView中添加修饰符

import SwiftUI

struct SystemColor: Hashable {
    var text: String
    var color: Color
}

let backgroundColors: [SystemColor] = [.init(text: "Red", color: .systemRed), .init(text: "Orange", color: .systemOrange), .init(text: "Yellow", color: .systemYellow), .init(text: "Green", color: .systemGreen), .init(text: "Teal", color: .systemTeal), .init(text: "Blue", color: .systemBlue), .init(text: "Indigo", color: .systemIndigo), .init(text: "Purple", color: .systemPurple), .init(text: "Pink", color: .systemPink), .init(text: "Gray", color: .systemGray), .init(text: "Gray2", color: .systemGray2), .init(text: "Gray3", color: .systemGray3), .init(text: "Gray4", color: .systemGray4), .init(text: "Gray5", color: .systemGray5), .init(text: "Gray6", color: .systemGray6)]

struct DarkModeColorView: View {

    @AppStorage("isDarkMode") var isDarkMode: Bool = true

    var body: some View {
        Form {
            Section(header: Text("Common Colors")) {
                ForEach(backgroundColors, id: \.self) {
                    ColorRow(color: $0)
                }
            }
        }
        .toolbar {
            ToolbarItem(placement: .principal) { // navigation bar
               Picker("Color", selection: $isDarkMode) {
                    Text("Light").tag(false)
                    Text("Dark").tag(true)
                }
                .pickerStyle(SegmentedPickerStyle())
            }
        }
        .modifier(DarkModeViewModifier())
    }
}

private struct ColorRow: View {

    let color: SystemColor

    var body: some View {
        HStack {
            Text(color.text)
            Spacer()
            Rectangle()
                .foregroundColor(color.color)
                .frame(width: 30, height: 30)
        }
    }
}

public struct DarkModeViewModifier: ViewModifier {

    @AppStorage("isDarkMode") var isDarkMode: Bool = true

    public func body(content: Content) -> some View {
        content
            .environment(\.colorScheme, isDarkMode ? .dark : .light)
            .preferredColorScheme(isDarkMode ? .dark : .light) // tint on status bar
    }
}

struct DarkModeColorView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            DarkModeColorView()
        }
    }
}

Answer 3

@Mojtaba Hosseini's 的回答确实帮助了我，但我使用的是 iOS14 的 @main 而不是 SceneDelegate，以及一些 UIKit 视图，所以我最终使用了这样的东西（这不会切换模式，但它确实在 SwiftUI 和 UIKit 之间设置了暗模式：

@main
struct MyTestApp: App {

    @Environment(\.scenePhase) private var phase

    var body: some Scene {
        WindowGroup {
            ContentView()
                .accentColor(.red)
                .preferredColorScheme(.dark)
        }
        .onChange(of: phase) { _ in
            setupColorScheme()
        }
    }

    private func setupColorScheme() {
        // We do this via the window so we can access UIKit components too.
        let window = UIApplication.shared.windows.first
        window?.overrideUserInterfaceStyle = .dark
        window?.tintColor = UIColor(Color.red)
    }
}

Answer 4

使用 SwiftUI 和 SceneDelegate 生命周期的系统范围

我使用in the answer by Mojtaba Hosseini 的答案中提供的提示在 SwiftUI（具有 AppDelegate 生命周期的应用程序）中制作了我自己的版本。我还没有考虑使用 iOS14 的 @main 代替 SceneDelegate。

这里是 GitHub 存储库的链接。该示例具有浅色、深色和自动选择器，可更改整个应用的设置。
我加倍努力使其可本地化！

GitHub repo

我需要访问SceneDelegate，并且我使用与 Mustapha 相同的代码并添加了一点点，当应用程序启动时，我需要读取存储在 UserDefaults 或 @AppStorage 等中的设置。
因此，我在启动时再次更新 UI：

private(set) static var shared: SceneDelegate?

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    Self.shared = self

    // this is for when the app starts - read from the user defaults
    updateUserInterfaceStyle()
}

函数updateUserInterfaceStyle() 将在SceneDelegate 中。 我在这里使用了 UserDefaults 的扩展使其与 iOS13 兼容（感谢twanni！）：

func updateUserInterfaceStyle() {
        DispatchQueue.main.async {
            switch UserDefaults.userInterfaceStyle {
            case 0:
                self.window?.overrideUserInterfaceStyle = .unspecified
            case 1:
                self.window?.overrideUserInterfaceStyle = .light
            case 2:
                self.window?.overrideUserInterfaceStyle = .dark
            default:
                self.window?.overrideUserInterfaceStyle = .unspecified
            }
        }
    }

这与apple documentation for UIUserInterfaceStyle一致

使用选择器意味着我需要对我的三个案例进行迭代，因此我创建了一个符合可识别且类型为 LocalizedStringKey 的枚举用于本地化：

// check LocalizedStringKey instead of string for localisation!
enum Appearance: LocalizedStringKey, CaseIterable, Identifiable {
    case light
    case dark
    case automatic

    var id: String { UUID().uuidString }
}

这是选择器的完整代码：

struct AppearanceSelectionPicker: View {
    @Environment(\.colorScheme) var colorScheme
    @State private var selectedAppearance = Appearance.automatic

    var body: some View {
        HStack {
            Text("Appearance")
                .padding()
                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
            Picker(selection: $selectedAppearance, label: Text("Appearance"))  {
                ForEach(Appearance.allCases) { appearance in
                    Text(appearance.rawValue)
                        .tag(appearance)
                }
            }
            .pickerStyle(WheelPickerStyle())
            .frame(width: 150, height: 50, alignment: .center)
            .padding()
            .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
        }
        .padding()

        .onChange(of: selectedAppearance, perform: { value in
            print("changed to ", value)
            switch value {
                case .automatic:
                    UserDefaults.userInterfaceStyle = 0
                    SceneDelegate.shared?.window?.overrideUserInterfaceStyle =  .unspecified
                case .light:
                    UserDefaults.userInterfaceStyle = 1
                    SceneDelegate.shared?.window?.overrideUserInterfaceStyle =  .light
                case .dark:
                    UserDefaults.userInterfaceStyle = 2
                    SceneDelegate.shared?.window?.overrideUserInterfaceStyle =  .dark
            }
        })
        .onAppear {
            print(colorScheme)
            print("UserDefaults.userInterfaceStyle",UserDefaults.userInterfaceStyle)
            switch UserDefaults.userInterfaceStyle {
                case 0:
                    selectedAppearance = .automatic
                case 1:
                    selectedAppearance = .light
                case 2:
                    selectedAppearance = .dark
                default:
                    selectedAppearance = .automatic
            }
        }
    }
}

当用户进入该设置视图时，代码onAppear 用于将滚轮设置为正确的值。每次移动滚轮时，通过 .onChange 修饰符，用户默认值都会更新，并且应用会通过引用 SceneDelegate 更改所有视图的设置。

（如果有兴趣，可以在 GH 回购中提供 gif。）

Answer 5

#SwiftUI #iOS #DarkMode #ColorScheme

//you can take one boolean and set colorScheme of perticuler view accordingly such like below

struct ContentView: View {

    @State var darkMode : Bool =  false

    var body: some View {
        VStack {
         Toggle("DarkMode", isOn: $darkMode)
            .onTapGesture(count: 1, perform: {
                darkMode.toggle()
            })
        }
        .preferredColorScheme(darkMode ? .dark : .light)

    }
}



// you can also set dark light mode of whole app such like below 

struct ContentView: View {
    @State var darkMode : Bool =  false

    var body: some View {
        VStack {
         Toggle("DarkMode", isOn: $darkMode)
            .onTapGesture(count: 1, perform: {
                darkMode.toggle()
            })
        }
        .onChange(of: darkMode, perform: { value in
            SceneDelegate.shared?.window?.overrideUserInterfaceStyle = value ? .dark : .light
        })

    }
}

Answer 6

@ADB 的答案很好，但我找到了更好的答案。希望有人能找到比我更好的：D 一旦应用切换状态（进入后台并返回），这种方法不会一遍又一遍地调用相同的函数

在您的@main 视图中添加：

ContentView()
    .modifier(DarkModeViewModifier())

现在创建DarkModeViewModifier() ViewModel：

class AppThemeViewModel: ObservableObject {
    
    @AppStorage("isDarkMode") var isDarkMode: Bool = true                           // also exists in DarkModeViewModifier()
    @AppStorage("appTintColor") var appTintColor: AppTintColorOptions = .indigo
    
}

struct DarkModeViewModifier: ViewModifier {
    @ObservedObject var appThemeViewModel: AppThemeViewModel = AppThemeViewModel()
    
    public func body(content: Content) -> some View {
        content
            .preferredColorScheme(appThemeViewModel.isDarkMode ? .dark : appThemeViewModel.isDarkMode == false ? .light : nil)
            .accentColor(Color(appThemeViewModel.appTintColor.rawValue))
    }
}