@AppStorage is not updating colorScheme environment variable instantly

Question

Created Aug ’23

Replies 1

Boosts 0

Participants 3

I have a SettingsView to let the user change the color scheme for the app, I store the user selection using @AppStorage, then i adjust the preferredColorScheme for the SettingsView using the value from @AppStorage, everything is working good because I change the view appearance based on the @AppStorage value and not the colorScheme environment property, if i try to do so, it wont work. preferredColorScheme is not being updated when AppStorage value changes, but when i exit the view and open it again.

For some reason, it is working perfectly on the preview but not in the simulator itself.

import SwiftUI

struct SettingsView: View {
    @State private var isPresentPrivacyPolicy = false
    @State private var isPresentTermsOfUse = false
    @AppStorage("selectedColorScheme") private var selectedColorScheme = "Light"

    var body: some View {
        ZStack {
            if selectedColorScheme == "Dark" {
                Theme.darkBackground
                    .ignoresSafeArea()
            } else {
                Theme.lightBackground
                    .ignoresSafeArea()
            }
            List {
                Section {
                    HStack {
                        Image(systemName: "doc.text.magnifyingglass")
                        Button("Privacy Policy") {
                            isPresentPrivacyPolicy = true
                        }
                        .buttonStyle(.plain)
                    }
                    HStack {
                        Image(systemName: "doc.plaintext")
                        Button("Terms of use") {
                            isPresentTermsOfUse = true
                        }
                        .buttonStyle(.plain)
                    }
                } header: {
                    Text("About")
                        .font(.headline)
                }
                .listRowBackground(selectedColorScheme == "Dark" ? Theme.listDarkBackground : Theme.listLightBackground)
                Section {
                    Picker("Color Scheme", selection: $selectedColorScheme) {
                        HStack {
                            Image(systemName: "sun.max")
                            Text("Light")
                        }
                        .tag("Light")
                        HStack {
                            Image(systemName: "moon")
                            Text("Dark")
                        }
                        .tag("Dark")
                    }
                } header: {
                    Text("App")
                        .font(.headline)
                }
                .listRowBackground(selectedColorScheme == "Dark" ? Theme.listDarkBackground : Theme.listLightBackground)
            }
            .scrollContentBackground(.hidden)
        }
        .preferredColorScheme(selectedColorScheme == "Dark" ? .dark : .light)
        .sheet(isPresented: $isPresentTermsOfUse) {
            NavigationStack {
                WebView(url: URL(string: "example.com")!)
                    .ignoresSafeArea()
                    .navigationTitle("App")
                    .navigationBarTitleDisplayMode(.inline)
            }
        }
        .sheet(isPresented: $isPresentPrivacyPolicy) {
            NavigationStack {
                WebView(url: URL(string: "example.com")!)
                    .ignoresSafeArea()
                    .navigationTitle("App")
                    .navigationBarTitleDisplayMode(.inline)
            }
        }
    }
}

struct Settings_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
    }
}

Boost

Answer 1

thafner OP

Aug ’23

It appears to me that what you're doing is very tedious and repetitive, since Apple provide the colorScheme environment variable that you can use to access the current system colour scheme and adapt the stuff that is specific to your application (such as the sun and moon images). Many of the built in views such as List also support the system colour scheme setting automatically out of the box.

0