Implementar el cambio de modo oscuro en la aplicación SwiftUI

Este post ha sido evaluado por expertos así se garantiza la exactitud de nuestro tutorial.

Solución:

Vista única

Para cambiar el esquema de color de una sola vista (podría ser la principal ContentView de la aplicación), puede utilizar el siguiente modificador:

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

o

.preferredColorScheme(.dark)

Además, puedes aplicarlo a la ContentView para oscurecer toda tu aplicación.

_{Asumiendo que no cambiaste el ContentView nombre en escena delegado o @main}

---

Toda la aplicación (incluida la UIKit partes y el SwiftUI)

Primero debe acceder a la ventana para cambiar el esquema de color de la aplicación que llamó UserInterfaceStyle en UIKit.

Usé esto en SceneDelegate:

private(set) static var shared: SceneDelegate?

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

Luego, debe vincular una acción a la palanca. Así que necesitas un modelo para ello.

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

Por último, solo necesita alternar el interruptor:

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

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

---

Desde la parte UIKit de la aplicación

Cada UIView tiene acceso a la ventana, por lo que puede usarlo para configurar el . overrideUserInterfaceStyle valor a cualquier esquema que necesite.

myView.window?.overrideUserInterfaceStyle = .dark

Una demostración de uso @AppStorage para cambiar el modo oscuro

PD: para el cambio global, el modificador debe agregarse a 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()
        
    

Te mostramos las reseñas y valoraciones de los usuarios

Tienes la opción de asistir nuestra investigación añadiendo un comentario o puntuándolo te damos las gracias.

---

---

Utiliza Nuestro Buscador