Doesn't work well in previews

[david-gettins]

When I look at both light and dark variants in the preview window, both variants render in light mode. I managed to get it working once by cleaning and rebuilding but always end up back with it not working after making changes to my view. Neither static or interactive previews seem to update correctly. Everything seems to work fine when running on a device. I have attached an image to illustrate.

Not Working

The background and onBackground colours should swap in dark mode for example.

Code for Preview Page

import SwiftUI
import SwiftTheming

struct ContentView: View {
    @ThemeProviding var themeProvider
    
    var body: some View {
        ScrollView {
            Column {
                Row {
                    Text("Hello, background!")
                        .foregroundColor(ColorAsset.onBackground)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.background)
                
                Row {
                    Text("Hello, surface!")
                        .foregroundColor(ColorAsset.onSurface)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.surface)
                
                Row {
                    Text("Hello, inverse surface!")
                        .foregroundColor(ColorAsset.inverseOnSurface)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.inverseSurface)
                
                Row {
                    Text("Hello, surface variant!")
                        .foregroundColor(ColorAsset.onSurfaceVariant)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.surfaceVariant)
                
                Row {
                    Text("Hello, primary!")
                        .foregroundColor(ColorAsset.onPrimary)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.primary)
                
                Row {
                    Text("Hello, inverse primary!")
                        .foregroundColor(ColorAsset.inversePrimary)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.background)
                
                Row {
                    Text("Hello, secondary!")
                        .foregroundColor(ColorAsset.onSecondary)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.secondary)
                
                Row {
                    Text("Hello, tertiary!")
                        .foregroundColor(ColorAsset.onTertiary)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.tertiary)
                
                Row {
                    Text("Hello, error!")
                        .foregroundColor(ColorAsset.onError)
                    Spacer()
                }
                .padding()
                .background(ColorAsset.error)
                
                Capsule()
                    .foregroundColor(ColorAsset.scrim)
                    .frame(width: 100, height: 50)
                    .padding()
                
                Row {
                    Circle()
                        .frame(width: 25, height: 25)
                        .foregroundColor(ColorAsset.trainingZone0)
                        .padding(.horizontal)
                    Circle()
                        .frame(width: 25, height: 25)
                        .foregroundColor(ColorAsset.trainingZone1)
                        .padding(.horizontal)
                    Circle()
                        .frame(width: 25, height: 25)
                        .foregroundColor(ColorAsset.trainingZone2)
                        .padding(.horizontal)
                    Circle()
                        .frame(width: 25, height: 25)
                        .foregroundColor(ColorAsset.trainingZone3)
                        .padding(.horizontal)
                    Circle()
                        .frame(width: 25, height: 25)
                        .foregroundColor(ColorAsset.trainingZone4)
                        .padding(.horizontal)
                    Circle()
                        .frame(width: 25, height: 25)
                        .foregroundColor(ColorAsset.trainingZone5)
                        .padding(.horizontal)
                }.padding(.bottom)
            }
        }
    }
}

struct Preview : PreviewProvider {
    static var previews: some View {
        ContentView().themeProviding()
    }
}

In some cases, when I wrap the preview in a container, it will work correctly but not in every instance. I have an interactive preview set up for one of my components where the developer can interact with it and see it working in the preview, in that case it works everytime. The example below shows what I mean by a wrapped preview.

Preview Wrapped Example

I added some "interactivity" in this example - a state holder called "state" that gets initialised with "Hidden" and onAppear sets to "Visible" - and you can see in the image that the background colours update correctly but not the foreground colours.

struct Preview : PreviewProvider {
    struct Container : View {
        var body: some View {
            ContentView(state: "Hidden")
        }
    }
    
    static var previews: some View {
        Container().themeProviding()
    }
}

It would be really helpful if you can get this working correctly in previews or provide some advice on the matter. I'm pretty sure I have followed the set up instructions properly given it works on a real device.