SwiftUI - Global accent color override

[esreli]

Environment

Xcode Version 13.2.1 (13C100)
Apple Swift version 5.5.2 (swiftlang-1300.0.47.5 clang-1300.0.29.30)
SPM Resolved Dependency:

      {
        "package": "Mixpanel",
        "repositoryURL": "https://github.com/mixpanel/mixpanel-swift",
        "state": {
          "branch": "master",
          "revision": "8f6fcb1876f48ef4e7794c66719b23838c990410",
          "version": null
        }
      }

Issue

I'm building a SwiftUI iOS app with a min deployment of iOS 14+. Because of this I'm using the SwiftUI types introduced in iOS 14 like App, Scene, etc. As such, I'm not notified that the app has launched through the app or scene delegate as is the case for UIKit apps. With this "pure" SwiftUI approach, all initializations are typically done within the App's init function.

With the initialization of Mixpanel, all of a sudden the project's Global accent color (contained by an Asset Catalog) is reverted to the default system blue.

@main
struct MyApp: App {
        
    init() {
        // Initialize Mixpanel
        Mixpanel.initialize(token: .mixpanelToken)
        #if DEBUG
        Mixpanel.mainInstance().loggingEnabled = true
        #endif
    }
    
    var body: some Scene {
        WindowGroup {
            MyAppView()
        }
    }
}

I believe this is an issue with the initialization API because when I comment out the line...

// Mixpanel.initialize(token: .mixpanelToken)

...the app global accent color works as expected.

What I've tried to remedy the issue

• Changing the Target's Global Accent Color Name & the corresponding .xcasset item from the default "AccentColor" to a non-standard name.
• Checking the build log to see if other asset catalogs were unexpectedly compiled into the binary
• Forking the repo & updating the Xcode project settings

Current Workaround

I've created a lazily built reference to Mixpanel.mainInstance() in which I initialize the token. This allows the Mixpanel initialize token code to be ran on the first time the app fires off the first track event.

lazy var instance: MixpanelInstance = {
    // Mixpanel
    Mixpanel.initialize(token: .mixpanelToken)
    #if DEBUG
    Mixpanel.mainInstance().loggingEnabled = true
    #endif
    return Mixpanel.mainInstance()
}()

This isn't ideal because any tracking associated with initializing Mixpanel is deferred until the first actively tracked event leaving a gap between launch and the first event in unknown territory.

---

Do you have any idea what's going on here? Thanks!

[jaredmixpanel]

@esreli can you provide a simple, example project that consistently reproduces this issue? I've managed to reproduce a few times, somewhat randomly, but more often than not, the issue is not reproducible.

[esreli]

Hi @jaredmixpanel, thanks for looking into this issue. After this sprint I'll try to set aside some time to publish a consistent repro case.

[esreli]

Hi @jaredmixpanel. I've reproduced the bug and pushed the code to this repository: esreli/mixpanel-bug.

Here's another interesting thing that I've learned along the way. If I were to initialize Mixpanel in the highest level View instead of initializing Mixpanel within the App then the problem seems to resolve itself.

Thanks in advance for looking into this for me!

[jaredmixpanel]

@esreli thanks for the example project. I still find the behavior very random. I've attached a long, boring, low resolution (sorry!) screen recording below, so you can see my results are very inconsistent. At the moment, I'm inclined to think this is a SwiftUI/Xcode kind of thing and that Mixpanel just so happens to be the code that is in your init(), but that some other code may cause similar issues.

accent_color_demo.mp4

[esreli]

@jaredmixpanel very interesting. I've updated the dependency to the latest commit on main as of today and it appears that the issue was possibly connected to the deadlock issue and is now resolved.

I can't be entirely confident here because the bug/repro case is so unreliable but, for now, I believe the issue has been fixed. Thanks @gabriellanata!

Closing.

[loryhuz]

Hi @jaredmixpanel @esreli I've still the issue, my whole app turns blue when I init Mixpanel

[vulgur]

same here, and the issue happens every time, not randomly.

[jaredmixpanel]

@loryhuz @vulgur From what I can gather this can happen whenever some UIKit code gets executed "too early".

https://forums.developer.apple.com/forums/thread/691336

https://stackoverflow.com/questions/71213275/wrong-accentcolor-showing-color-ignored

https://stackoverflow.com/questions/69175418/ios15-xcode-13-global-accent-color-not-working

Try moving your Mixpanel initialization code to AppDelegate or SceneDelegate or...

    var body: some Scene {
        WindowGroup {}
        .onChange(of: scenePhase) { _, newPhase in
            if newPhase == .active {
                Mixpanel.initialize(token: "YOUR_TOKEN", trackAutomaticEvents: true)
            }
        }
    }

Seems like another option is to manually specify the accent color on the WindowGroup...

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            myMainView
                .accentColor(MyGlobalAppearance.myAccentColor)
        }
    }
}

[vulgur]

@jaredmixpanel
I tried both of your suggestions.
Putting initialization in onChange works, but setting accentColor still doesn't work.

[jaredmixpanel]

@vulgur Sorry to hear your still having issues. So have you tried...

• 1. Initializing Mixpanel in the AppDelegate's applicationDidBecomeActive(_:)
• 2. Or if you are using Scenes, in the SceneDelgate's sceneDidBecomeActive(_:)
• 3. Initializing Mixpanel in the .onChange(of: scenePhase)
• 4. Manually setting the .accentColor()on the main view in the WindowGroup
• 5. Manually setting the window's .tintColor in the SceneDelegate as mentioned here: https://stackoverflow.com/a/73461232
• 6. Combining various permutations of the above like 3 + 4 or 2 + 5, etc..

I would suggest continue experimenting with initializing Mixpanel at various points of your application / scene lifecycle and manually setting the accentColor and tintColor in code. The Mixpanel SDK doesn't touch accent color but it does depend on a few UIKit API's and apparently if your app calls some UIKit API's too early, before calling WindowGroup it seems, this issue can occur as discussed in the links provided.

[vulgur]

@vulgur Sorry to hear your still having issues. So have you tried...

• 1. Initializing Mixpanel in the AppDelegate's applicationDidBecomeActive(_:)[ ] 2. Or if you are using Scenes, in the SceneDelgate's sceneDidBecomeActive(_:)[ ] 3. Initializing Mixpanel in the .onChange(of: scenePhase)[ ] 4. Manually setting the .accentColor()on the main view in the WindowGroup[ ] 5. Manually setting the window's .tintColor in the SceneDelegate as mentioned here: https://stackoverflow.com/a/73461232[ ] 6. Combining various permutations of the above like 3 + 4 or 2 + 5, etc..

I would suggest continue experimenting with initializing Mixpanel at various points of your application / scene lifecycle and manually setting the accentColor and tintColor in code. The Mixpanel SDK doesn't touch accent color but it does depend on a few UIKit API's and apparently if your app calls some UIKit API's too early, before calling WindowGroup it seems, this issue can occur as discussed in the links provided.

I am not using AppDelegate and SceneDelegate, so I have not tried 1, 2 and 5.
As I mentioned above, 3 works for me, but 4 don't works.

Thanks for your explanation and suggestions.

[alpennec]

Hello @jaredmixpanel,

I'm having the same issue when I initialise the Mixpanel library from my SwiftUI App init. If I delay a bit the initialisation, it works as expected and the app gets the current accent color from the Assets catalog in the app.

I'm initialising other objects at the app init level, and these objects use Mixpanel to track events, set user properties or super properties. So I can't really delay the initialisation of Mixpanel in applicationDidBecomeActive(_:), sceneDidBecomeActive(_:) or .onChange(of: scenePhase). If I put the .tintColor at the root of my View hierarchy, it does not work because Views located in a Swift Package my app import doesn't get the correct accent color.

I'm surprised this issue still exists and there is still not any fix?

Thank you,
Axel

[jaredmixpanel]

@alpennec Do you initialize Mixpanel with trackAutomaticEvents: true? If so, you may want to try setting it to false and then enabling it later with mixpanel.trackAutomaticEventsEnabled = true. If my suspicion that this issue occurs when your app calls UIKit code too early is correct, that may fix it, as automatic event tracking requires registering for UIKit notification observers. Let me know.

[alpennec]

@jaredmixpanel this is it! I just disabled trackAutomaticEvents from my Mixpanel initialisation and I don't have this issue anymore! Wow, your assumption was correct 👏🏻 I'm very happy that I now know what's causing this issue and I can think of a workaround. I'll try to see where I can enable it again without impacting too much these automatically tracked events (I'll check in the SDK what the observers are).