Random browser issues with App colors on Wasm

[assassin316]

Some users are reporting a completely different look in the app, somehow the app colors are not loading properly in Wasm, not sure if it's a known issue or something I need to update in the code.

Here's a sample of my app colors (no theming yet):

Here's what it looks like on my end:

And here is what one user sees on their end:

The affected user is running the latest Chrome on a Win 10 machine. This has also been reported by a friend using Chrome on a Mac.

Is there something I need to do to the app colors for proper handling across all browsers?

[jeromelaban]

This looks like a theming issue. Does your app support light/dark themes?

[assassin316]

Originally I had a flat list of colors/brushes without any theming in place,

Then I made all changes to support theming using Light/Dark (copied exact same colors into both dictionaries) and used ThemeResource where needed:

Unfortunately got same result from the user when he tried the new version:

Wondering what other hacks I can try to determine the issue.

[jeromelaban]

Very curious. Are you animating those resources in any way?

[assassin316]

No but I did notice the major cultprits of this odd behavior is my RadialBrush and LinearGradientBrush when I apply them to the Page and NavigationView of the Shell. I swapped them out for a SolidColorBrush and they work fine, still investigating and will report back with more info once I have it.

[assassin316]

Ok, figured out the issue and fixed it. It's a few things.

To begin, the following didn't work:

What was actually happening is the Wasm version was reading the "system" theme, which in the case of some users, it was Light, and all my PC's are dark, which explains why I never saw the issue.

To fix that, it was simply:

Next, there is an issue with the RadialGradientBrush, it just never picks works with the target theme, even with my fix. I specified it as such:

Instead of digging, I just swapped it for a LinearGradientBrush and that worked perfectly.

And now, the app loads as expected. 👍

Will close this discussion.