How to apply a global theme for an App using TCA?

[BaochengHan-TomTom]

Hi there,

We are developing an app using TCA. In the app, there are multiple SwiftUi views and its corresponding States which strictly conform to TCA.

At his point, we are trying to introduce a theme state which contains info like colors, fonts, etc. and will be applied to all SwiftUI views in the app. Whenever the theme changes, the new theme will be propagated to all view states, so that the views can get updated based on the latest theme.

To do this, we have a theme state which acts like a global theme for the whole app in the top layer of the state tree , and add themes for each and one of the SwfitUI view depending states, so that the top reducer is able to observe the change of the global theme and propagate it to the low layer viewstates.

One downside of this approach is that there are repetitivenesses of the theme across the whole app, which makes it difficult to maintain.

Is there a better solution? What is the best practice to handle this bases on TCA?

Thanks.

[tgrapperon]

Hello,
You can probably use SwiftUI's Environment to handle the propagation for you. You could probably do something like this:

public struct Theme: Equatable {}
enum ThemeKey: EnvironmentKey {
  static var defaultValue: Theme { Theme() }
}
extension EnvironmentValues {
   public var theme: Theme {
    get { self[ThemeKey.self] }
    set { self[ThemeKey.self] = newValue }
  }
}

In any view you want to use the theme, you can expose a theme value:

@Environment(\.theme) var theme
var body: some View {
  Text("Hello!")
    .background(theme.backgroundColor)
}

If var theme: Theme is a property storing your theme in your root state, and assuming it is Equatable, you can scope into this value and use a ViewModifier for example.

struct ThemeApplicator: ViewModifier {
  var store: Store<Theme, Never>
  func body(content: Content) -> some View {
    WithViewStore(store) { viewStore in
      content.environment(\.theme, viewStore.state)
    }
  }
}

You can activate this modifier using:

var body: some View {
  NavigationView {
    …
  }
  .modifier(
    ThemeApplicator(store: store.scope(state: \.theme).actionless)
  )
}

That's how I would do if the theme was a value accessible from my root state.
On TCA side, you can probably use the Environment (TCA) to avoid having to propagate your Theme value all the way to the domain where it is defined: In your ThemeEditor domain, you extract the current Theme value at .onAppear and you save it where appropriate (UserDefaults, CoreData, etc.) when it changes. Then, in your RootDomain you extract a Theme value in the same fashion and you pass it to the ThemeApplicator.

Alternatively, it is also possible that extracting the Theme from where it is saved could be done independently from TCA and you could also use this and .environment(\.theme, currentTheme) directly.

If your Theme value is not equatable, you can probably wrap it into something like

struct ThemeWrapper: Equatable {
  let theme: Theme
  let token: UUID = UUID()
  static func == (a: Self, b: Self) -> Bool { a.token == b.token }
}

You modify your modifier to accept a Store<ThemeWrapper, Never> and you use environment(\.theme, viewStore.state.theme) to propagate an up-to-date Theme.
In your root Reducer, you can observe your ThemeEditor domain actions and rewrite a new ThemeWrapper value to your state when they happen:

…
case .themeEditor:
  state.themeWrapper = ThemeWrapper(theme: state.theme)
  return .none

Alternatively, if your theme storage offers a publisher of some sort, you can rely on that.

[mbrandonw]

In addition to what @tgrapperon said, I'd also like to add that if the theme data is not needed in your business logic, then it does not need to be in state. It is completely fine to have view-specific data that is not visible to the reducers, and to feed that data throughout your views via SwiftUI's environment.

[derekc00]

I find it helpful knowing that it's okay to use SwiftUI's environment instead of always relying on TCA or putting something into State that doesn't need to be (in this case). Great insight for a TCA beginner like myself. Thanks!

[BaochengHan-TomTom]

Thanks both of you, @tgrapperon and @mbrandonw. Your proposal and suggestion perfectly solve our problem.