首页 > 解决方案 > SwiftUI 深色模式不适用于工作表

问题描述

我正在使用切换和@AppStorage 来更改我的应用程序中的preferredColorScheme。暗模式和亮模式在工作表和全屏模式以外的视图上运行良好。

struct MyApp: App {

    @AppStorage("darkMode") var darkMode = false

    init() {
        FirebaseApp.configure()
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
                .preferredColorScheme(darkMode ? .dark : .light)
        }
    }
}

应用设置视图:

struct AppSettingsView: View {

    @ObservedObject var appSettingsVM: AppSettingsViewModel

    var body: some View {
        ScrollView {
            Toggle("Dark Mode", isOn: $appSettingsVM.darkMode.animation())
                .toggleStyle(SwitchToggleStyle(tint: .orange))
                .padding()
        }
    }
}

应用设置视图模型:

class AppSettingsViewModel: ObservableObject {

    @AppStorage("darkMode") var darkMode: Bool = false

}

内容视图层次结构下有多个工作表和全屏模式,它们都没有响应颜色方案的变化。

标签: swiftuiios-darkmode

解决方案


我从 YouTube 视频中修改了解决方案,这很有效。

import Foundation
import UIKit

class ThemeManager {
    static let shared = ThemeManager()

    private init () {}

    func handleTheme(darkMode: Bool, system: Bool) {
    
        guard !system else {
            UIApplication.shared.windows.first?.overrideUserInterfaceStyle = .unspecified
            return
        }
        UIApplication.shared.windows.first?.overrideUserInterfaceStyle = darkMode ? .dark : .light
    }

}

import SwiftUI
import Firebase

@main
struct MyApp: App {

    @AppStorage("darkMode") var darkMode: Bool = false
    @AppStorage("system") var system: Bool = true

    init() {
        FirebaseApp.configure()
    }

    var body: some Scene {
        WindowGroup {
            MainView(mainVM: MainViewModel())
                .onAppear {
                    ThemeManager.shared.handleTheme(darkMode: self.darkMode, system: self.system)
                }
        }
    }

struct AppSettingsView: View {

    @ObservedObject var appSettingsVM: AppSettingsViewModel

    var body: some View {
    
        VStack {
        
            HStack {
            
                Text("App Settings")
                    .font(.title2)
                    .padding()
                Spacer()
            
            }
            .padding(.horizontal)
        
            Divider()
        
            ScrollView {
            
                HStack {
                
                    Text("Theme")
                
                    Spacer()
            
                    Menu {
                        Button("System") {
                            appSettingsVM.handleTheme(darkMode: false, system: true)
                        }
                        Button("Light") {
                            appSettingsVM.handleTheme(darkMode: false, system: false)
                        }
                        Button("Dark") {
                            appSettingsVM.handleTheme(darkMode: true, system: false)
                        }
                    } label: {
                        Text(appSettingsVM.darkModeLabel)
                            .frame(width: 80)
                            .padding(5)
                            .background(Color.orange)
                            .foregroundColor(.white)
                            .clipShape(RoundedRectangle(cornerRadius: 12))
                    }
                
                }
                .padding()
            }
        }

import SwiftUI

class AppSettingsViewModel: ObservableObject {

    @AppStorage("darkMode") var darkMode: Bool = false
    @AppStorage("system") var system: Bool = true
    @Published var darkModeLabel = "System"

    func handleTheme(darkMode: Bool, system: Bool) {
        self.darkMode = darkMode
        self.system = system
        if darkMode == false && system == true {
            withAnimation {
                self.darkModeLabel = "System"
            }
        } else if darkMode == false && system == false {
            withAnimation {
                self.darkModeLabel = "Light"
            }
        } else {
            withAnimation {
                self.darkModeLabel = "Dark"
            }
        }
        ThemeManager.shared.handleTheme(darkMode: self.darkMode, system: self.system)
    }
    
}

视频链接:https ://www.youtube.com/watch?v=j7a4jvHz4MM


推荐阅读