How to get the default shell flyout icon to react when android dark theme is switched on/off - xaml

Question

I have an app which uses the shell flyout. When I added the flyout, it automatically created an icon as shown in the image below:
However, when I switch the android dark theme off:
The flyout icon remains white making it difficult to see:
I am using AppThemeBinding to automatically theme the app accordingly based on the system theme selected by the user, but I do not know how to change the flyout icon to a darker color if the user switches off the dark theme from the android settings.
Any idea how to do that?
The AppShell.xaml currently looks like this:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MAUIApp1.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MAUIApp1"
FlyoutBackgroundColor="{AppThemeBinding Light=#f2f2f2, Dark=#2a2a2a}">
<Shell.Resources>
<ResourceDictionary>
...
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
...
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</Shell.ItemTemplate>
<FlyoutItem Title="Item1" Icon="item1.svg">
<ShellContent ContentTemplate="{DataTemplate local:page1}" Route="page1"/>
</FlyoutItem>
<FlyoutItem Title="Item2" Icon="item2.svg">
<ShellContent ContentTemplate="{DataTemplate local:page2}" Route="page2"/>
</FlyoutItem>
<FlyoutItem Title="Item3" Icon="item3.svg">
<ShellContent ContentTemplate="{DataTemplate local:page3}" Route="page3"/>
</FlyoutItem>
<Shell.FlyoutFooter>
...
</Shell.FlyoutFooter>
</Shell>

Answer 1

Generally, you could override the Foreground color of the Shell to accomplish this:
<Shell
x:Class="MAUIApp1.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MAUIApp1"
FlyoutBackgroundColor="{AppThemeBinding Light=#f2f2f2, Dark=#2a2a2a}"
Shell.ForegroundColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}">
Alternatively, you can overwrite the style directly, by editing the Resources\Styles\styles.xaml:
<Style TargetType="Shell" ApplyToDerivedTypes="True">
<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
<!--<Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />-->
<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
</Style>