Implement dark mode switch in SwiftUI App

后端 未结 2 468
天命终不由人
天命终不由人 2020-12-10 18:08

I\'m currently looking into Dark Mode in my App. While Dark Mode itself isn\'t much of a struggle because of my SwiftUI basis i\'m struggling with the option to set the Colo

2条回答
  •  独厮守ぢ
    2020-12-10 18:55

    Single View

    To change the color scheme of a single view (Could be the main ContentView of the app), you can use the following modifier:

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

    or

    .preferredColorScheme(.dark)
    

    Also, you can apply it to the ContentView to make your entire app dark!

    Assuming you didn't change the ContentView name in scene delegate or @main


    Entier App (Including the UIKit parts and The SwiftUI)

    First you need to access the window to change the app colorScheme that called UserInterfaceStyle in UIKit.

    I used this in SceneDelegate:

    private(set) static var shared: SceneDelegate?
    
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        Self.shared = self
        ...
    }
    

    Then you need to bind an action to the toggle. So you need a model for it.

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

    At last, you just need to toggle the switch:

    struct ContentView: View {
         @State var model = ToggleModel()
    
         var body: some View {
             Toggle(isOn: $model.isDark) {
                 Text("is Dark")
            }
        }
    }
    

    From the UIKit part of the app

    Each UIView has access to the window, So you can use it to set the . overrideUserInterfaceStyle value to any scheme you need.

    myView.window?.overrideUserInterfaceStyle = .dark
    

提交回复
热议问题