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

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>

CodePudding user response：

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>