如何让默认Shell Flyout图标随Android深色主题切换响应

方法一：为不同主题提供独立图标文件 #

如果你的SVG图标是固定颜色的，可分别准备浅色主题（深色图标）和深色主题（白色图标）的版本，通过AppThemeBinding动态切换：

1. 准备两套图标文件，比如item1_light.svg（深色，用于浅色主题）和item1_dark.svg（白色，用于深色主题），放入项目资源目录。
2. 修改FlyoutItem的Icon属性：

<FlyoutItem Title="Item1" Icon="{AppThemeBinding Light=item1_light.svg, Dark=item1_dark.svg}">
    <ShellContent ContentTemplate="{DataTemplate local:page1}" Route="page1"/>
</FlyoutItem>

对所有FlyoutItem重复此操作，分别指定对应主题的图标文件。

方法二：通过TintColor为SVG图标动态着色 #

若你的SVG是可着色的（内部未硬编码填充色，或填充色设为currentColor），可通过绑定TintColor到主题资源实现单图标适配双主题：

1. 在Shell.Resources的ResourceDictionary中定义主题颜色资源：

<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="FlyoutIconLight">#1a1a1a</Color>
        <Color x:Key="FlyoutIconDark">#ffffff</Color>
    </ResourceDictionary>
</Shell.Resources>

2. 修改FlyoutItem的图标定义，使用FontImageSource绑定色调：

<FlyoutItem Title="Item1">
    <FlyoutItem.Icon>
        <FontImageSource Source="item1.svg" 
                         TintColor="{AppThemeBinding Light={StaticResource FlyoutIconLight}, Dark={StaticResource FlyoutIconDark}}"/>
    </FlyoutItem.Icon>
    <ShellContent ContentTemplate="{DataTemplate local:page1}" Route="page1"/>
</FlyoutItem>

方法三：自定义ItemTemplate完全控制样式 #

若上述方法不生效，可通过自定义Shell.ItemTemplate统一控制图标和文字的主题适配：

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid ColumnDefinitions="48, *">
            <Image Source="{Binding Icon}" 
                   TintColor="{AppThemeBinding Light=#1a1a1a, Dark=#ffffff}"
                   Margin="16"/>
            <Label Grid.Column="1" 
                   Text="{Binding Title}"
                   VerticalTextAlignment="Center"
                   TextColor="{AppThemeBinding Light=#1a1a1a, Dark=#ffffff}"/>
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

此方式会让所有FlyoutItem的图标和标题文字自动同步主题色调。

内容的提问来源于stack exchange，提问作者oshirowanen