Custom Trait with UITraitBridgedEnvironmentKey not writing back to UITraitCollection

Question

Created 2d

Replies 1

Boosts 0

Participants 2

Hello, In my SwiftUI App i'm trying to create a custom UI trait and a matching bridged SwiftUI environment key. I want to override the environment key in a swift view and then have that reflect in the current UITraitCollection. I'm following the pattern in the linked video but am not seeing the changes reflect in the current trait collection when I update the swift env value. I can't find anything online that is helping. Does anyone know what I am missing? https://developer.apple.com/videos/play/wwdc2023/10057/

  
// Setup
enum CustomTheme: String, Codable {
    case theme1 = “theme1”,
         theme2 = “theme2”
}
 
struct customThemeTrait: UITraitDefinition {
    static let defaultValue = brand.theme1
    static let affectsColorAppearance = true
    static let identifier = "com.appName.customTheme"
    
}
extension UITraitCollection {
    var customTheme: CustomTheme { self[customThemeTrait.self] }
}
extension UIMutableTraits {
    var customTheme: CustomTheme {
        get { self[customThemeTrait.self] }
        set { self[customThemeTrait.self] = newValue }
    }
}
 
private struct customThemeKey: EnvironmentKey {
    static let defaultValue: CustomTheme = .theme1
}
 
extension customThemeKey: UITraitBridgedEnvironmentKey {
    static func read(from traitCollection: UITraitCollection) -> CustomTheme {
        traitCollection.customTheme
    }
    static func write(to mutableTraits: inout UIMutableTraits, value: CustomTheme) {
        mutableTraits.customTheme = value
    }
}
extension EnvironmentValues {
    var customTheme: CustomTheme {
        get { self[customThemeKey.self] }
        set { self[customThemeKey.self] = newValue }
    }
}
 
 
 
// Attempted Usage
 
extension Color {
    static func primaryBackground() -> Color {
        UITraitCollection.current.customTheme == .theme1 ? Color.red : Color.blue
    }
}
 
struct ContentView: View {
    @State private var theme = .theme1
 
    var body: some View {
        if (dataHasLoaded && themeIsSet) {
            HomeView()
            .environment(\.customTheme, theme)
        } else {
            SelectThemeView( theme: self.theme, setContentThemeHandler)
        }
    }
 
    func setContentThemeHandler(theme: customTheme) { 
        self.theme = theme
    }
}
 
 
struct HomeView() {
    @Environment(\.customTheme) private var currentTheme: customTheme    
var body: some View {
        VStack {
            Text("currentTheme: \(currentTheme.rawValue)")
                .background(Color.primaryBackground())
            Text("currentUITrait: \(UITraitCollection.current.customTheme.rawValue)")
                .background(Color.primaryBackground())
        }
    }
}

OUTCOME: After selecting theme2 in the theme selector view and navigating to the homeView, the background is still red and the env and trait values print the following:

currentTheme: theme2 currentUITrait: theme1

Can anyone help me identify what I am missing?

Boost

Answer 1

Frameworks Engineer OP

Apple

1d

The issue with this code is the use of UITraitCollection.current. The current trait collection is only valid when used inside of one of the methods where UIKit sets it for you, or if you set it yourself. Please refer to the documentation here which explains more: https://developer.apple.com/documentation/uikit/uitraitcollection/current

In UIKit, there is no single "global" trait collection; every view and view controller in your app has its own trait collection, and the current one is just a reference to the trait collection of one of those objects. It's a similar situation in SwiftUI, where there is no single "global" set of EnvironmentValues; the values you read out of the environment depend on which SwiftUI View you read from.

In both UIKit and SwiftUI, traits & environment values flow through the view hierarchy, so you need to make sure that you are reading values from the correct place in the hierarchy. In this case, using the .environment(\.customTheme, theme) modifier in SwiftUI is what writes the value into the hierarchy, so it's only within views inside of that (e.g. within the HomeView) that you will be able to read that value — on that front, your code looks good already.

If you want to vary the appearance of a color based on traits or environment values, one option is to create a UIColor using the dynamic provider closure, which is passed in a UITraitCollection to resolve using: https://developer.apple.com/documentation/uikit/uicolor/init(dynamicprovider:)

0


	// Setup
	enum CustomTheme: String, Codable {
	case theme1 = “theme1”,
	theme2 = “theme2”
	}

	struct customThemeTrait: UITraitDefinition {
	static let defaultValue = brand.theme1
	static let affectsColorAppearance = true
	static let identifier = "com.appName.customTheme"

	}
	extension UITraitCollection {
	var customTheme: CustomTheme { self[customThemeTrait.self] }
	}
	extension UIMutableTraits {
	var customTheme: CustomTheme {
	get { self[customThemeTrait.self] }
	set { self[customThemeTrait.self] = newValue }
	}
	}

	private struct customThemeKey: EnvironmentKey {
	static let defaultValue: CustomTheme = .theme1
	}

	extension customThemeKey: UITraitBridgedEnvironmentKey {
	static func read(from traitCollection: UITraitCollection) -> CustomTheme {
	traitCollection.customTheme
	}
	static func write(to mutableTraits: inout UIMutableTraits, value: CustomTheme) {
	mutableTraits.customTheme = value
	}
	}
	extension EnvironmentValues {
	var customTheme: CustomTheme {
	get { self[customThemeKey.self] }
	set { self[customThemeKey.self] = newValue }
	}
	}



	// Attempted Usage

	extension Color {
	static func primaryBackground() -> Color {
	UITraitCollection.current.customTheme == .theme1 ? Color.red : Color.blue
	}
	}

	struct ContentView: View {
	@State private var theme = .theme1

	var body: some View {
	if (dataHasLoaded && themeIsSet) {
	HomeView()
	.environment(\.customTheme, theme)
	} else {
	SelectThemeView( theme: self.theme, setContentThemeHandler)
	}
	}

	func setContentThemeHandler(theme: customTheme) {
	self.theme = theme
	}
	}


	struct HomeView() {
	@Environment(\.customTheme) private var currentTheme: customTheme
	var body: some View {
	VStack {
	Text("currentTheme: \(currentTheme.rawValue)")
	.background(Color.primaryBackground())
	Text("currentUITrait: \(UITraitCollection.current.customTheme.rawValue)")
	.background(Color.primaryBackground())
	}
	}
	}