[Android, iOS] Command bar icons not working properly

[Lee31416]

Current behavior

The icons in the command bar exhibit multiple bugged behaviours that differ from uwp on mobile.

1. In the project I'm working on the commandbar icons don't work with the theme on android only. They act like you didn't use ThemeResource when using them.
2. In the sample I created to reproduce the 1st bug both on ios and android the command bar icons are invisible and on uwp they appear to not be working with the theme but when you toggle the theme 2 times it works properly.

Expected behavior

The command bar icons should be working with the theme and the behaviour should be the same on all platforms.

How to reproduce it (as minimally and precisely as possible)

1. Download this sample SampleCommandBarIconBug.zip
2. Deploy it first to windows to see the weird behaviour where the icons change color after a couple theme toggling.
3. Deploy it to mobile either ios or android both have the icons invisible.
4. You could try with different brush on the icons in the OnboardingPage.xaml different brush but most have the same behaviour.

Environment

Nuget Package: Uno.winui Uno.winui.lottie uno.winui.remote control Package Version(s): 4.9.20 Affected platform(s):

• [x] iOS
• [x] Android
• [ ] WebAssembly
• [x] UWP (Kind of but it's mostly on mobile)
• [ ] MacOS

Anything else we need to know?

As I said the bug in the sample is a bit different than the one I was trying to reproduce because in the sample the icons in the command bar are just invisible but in my project the icons are just not changing with the theme but they are visible but I couldn't reproduce it in the sample.

Also this bug might be a possible regression from this issue : https://github.com/unoplatform/nventive-private/issues/304

[kazo0]

maybe related: https://github.com/unoplatform/uno/pull/12503

[kazo0]

@Lee31416 For this:

Deploy it first to windows to see the weird behaviour where the icons change color after a couple theme toggling.

The reason is the way your brush resources are defined. You should be placing the SolidColorBrush resources inside of ThemeDictionaries and you should not be using the ThemeResource binding for the Color property of the SolidColorBrush

So your Brushes.xaml should look something like this:

<ResourceDictionary.ThemeDictionaries>
	<ResourceDictionary x:Key="Light">
		<!-- Success brushes -->
		<SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource SuccessColor}" />
		<SolidColorBrush x:Key="OnSuccessBrush" Color="{StaticResource OnSuccessColor}" />

		<SolidColorBrush x:Key="PrimaryAccentBrush" Color="{StaticResource PrimaryAccentColor}" />

		<SolidColorBrush x:Key="SeparatorBrush" Color="{StaticResource OnSurfaceColor}" Opacity="0.12" />

		<!--
			Some of the pages design flip the dichotomy of Background colors with their OnBackground complement.
			So we have those brushes to avoid the
		-->
		<SolidColorBrush x:Key="AlternateBackgroundBrush" Color="{StaticResource OnBackgroundColor}" />
		<SolidColorBrush x:Key="AlternateOnBackgroundBrush" Color="{StaticResource BackgroundColor}" />
		<SolidColorBrush x:Key="AlternateSurfacedBrush" Color="{StaticResource OnSurfaceColor}" />
		<SolidColorBrush x:Key="AlternateOnSurfaceBrush" Color="{StaticResource SurfaceColor}" />
	</ResourceDictionary>
	<ResourceDictionary x:Key="Dark">
		<!-- Success brushes -->
		<SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource SuccessColor}" />
		<SolidColorBrush x:Key="OnSuccessBrush" Color="{StaticResource OnSuccessColor}" />

		<SolidColorBrush x:Key="PrimaryAccentBrush" Color="{StaticResource PrimaryAccentColor}" />

		<SolidColorBrush x:Key="SeparatorBrush" Color="{StaticResource OnSurfaceColor}" Opacity="0.12" />

		<!--
			Some of the pages design flip the dichotomy of Background colors with their OnBackground complement.
			So we have those brushes to avoid the
		-->
		<SolidColorBrush x:Key="AlternateBackgroundBrush" Color="{StaticResource OnBackgroundColor}" />
		<SolidColorBrush x:Key="AlternateOnBackgroundBrush" Color="{StaticResource BackgroundColor}" />
		<SolidColorBrush x:Key="AlternateSurfacedBrush" Color="{StaticResource OnSurfaceColor}" />
		<SolidColorBrush x:Key="AlternateOnSurfaceBrush" Color="{StaticResource SurfaceColor}" />
	</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

I know it seems weird to copy the Brush definitions for each theme dictionary but that is the recommended way to organize the resources.

See Guidelines for custom theme resources

See Troubleshooting theme resources, especially the final snippet:

It's possible this may also fix your issues for other platforms as well, I am checking into that now

[kazo0]

I can confirm that with a new app using the latest packages that this is no longer happening and everything seems to be working fine:

https://github.com/unoplatform/Uno.Themes/assets/4793020/eabcfea4-9c09-4693-a913-dcca09450b8a

UnoApp66.zip