Xcode 11 - SwiftUI Aperçu du mode sombre

Question

Dans Xcode 11, nous pouvons activer le mode sombre lorsque l'application est en cours d'exécution en basculant les remplacements d'environnement au bas de la zone de débogage comme ceci.

SwiftUI a l'éditeur Canvas qui génère des aperçus en direct de l'application pendant que vous construisez votre interface.

Existe-t-il un moyen de basculer en mode sombre dans ces aperçus?

Answer 1

Vous devriez avoir quelque chose comme ça au bas du fichier en cours de prévisualisation. Voici ce que Xcode utilise pour générer l'aperçu:

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

Pour changer l'aperçu en mode sombre, il vous suffit de spécifier un colorScheme:

static var previews: some View {
    ContentView().colorScheme(.dark)
}

Ou, vous pouvez même choisir de prévisualiser les modes clair et sombre en même temps:

static var previews: some View {
    Group {
        ContentView().colorScheme(.light)
        ContentView().colorScheme(.dark)
    }
}

Je recommande de regarder la session Présentation de SwiftUI pour plus d'exemples de SwiftUI et la puissance des aperçus.

Answer 2

Remarque: Au moment de la rédaction, vous avez besoin d'une NavigationView comme vue de niveau supérieur pour que .environment (.colorScheme, .dark) fonctionne. Mais alors la (grande) barre de navigation recouvre les blocs de couleur, donc les deux modificateurs navigationBar rendent la barre plus petite et la cachent ... en quelque sorte. Cela pourrait être un bogue dans Xcode.

Source - contenu payant

J'ai testé cela sur Xcode 11.2.1 et le problème avec le NavigationView existe toujours. L'environnement ne semble pas changer sauf si votre vue entière est enveloppée dans un NavigationView. Vous pouvez essayer de masquer le NavigationView en utilisant .navigationBarTitle("") & .navigationBarHidden(true).

Exemple:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Light vs Dark Mode")

            // Uncomment these lines if you don't want the navigation bar
            // .navigationBarTitle("")
            // .navigationBarHidden(true)

            // You can also apply a colorScheme here
            // which will impact how the view looks when the app
            // is launched on device. Regardless of the users theme settings
        }// .environment(\.colorScheme, .dark)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        // ContentView().environment(\.colorScheme, .dark)
        // ContentView().environment(\.colorScheme, .light)

        // If you want you can display both schemes in a group
        Group {
            ContentView()
            .environment(\.colorScheme, .light)

           ContentView()
           .environment(\.colorScheme, .dark)
       }
    }
}

Exemple d'aperçu en mode sombre: