Set @Environment colorScheme as default for customisable isLightMode bool var

Question

Created Oct ’22

Replies 1

Boosts 2

Participants 2

Hi, I am trying to build a toggle in my app that allows users to override their device colorScheme (light or dark) by toggling the button. However, I want the device colorScheme to be the default toggle of my additional bool var 'isLightMode' (which can then be toggled by the user to change colorScheme). So something like:

@Environemnt(.colorScheme) var colorScheme @State var isLightMode: colorScheme == .light ? true : false

...

Obviously I know the above doesn't work, but that's the idea.

Any help is much appreciated :D.

Boost

Answer 1

Frameworks Engineer OP

Apple

Oct ’22

Using composition of an inner and outer view you can achieve this

import SwiftUI

struct OuterView: View {
    @Environment(\.colorScheme) var colorScheme
    var body: some View {
        InnerView(deviceColorScheme: colorScheme)
    }
}

struct InnerView: View {
    @State private var isPresented: Bool = false
    @State private var localColorScheme: ColorScheme
    init(deviceColorScheme: ColorScheme) {
        _localColorScheme = State(initialValue: deviceColorScheme)
    }

    var body: some View {
        Button("Show Sheet") {
            isPresented = true
        }
        .sheet(isPresented: $isPresented) {
            List {
                Toggle("Use Dark Mode", isOn: .init(get: {
                    localColorScheme == .dark
                }, set: { newValue in
                    localColorScheme = newValue ? .dark : .light
                }))
            }
        }
        .preferredColorScheme(localColorScheme)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        OuterView()
    }
}

Screenshot 2022-10-25 at 2.02.44 PM.png

Screenshot 2022-10-25 at 2.03.06 PM.png

0