2

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:

Default flyout icon in dark mode

However, when I switch the android dark theme off:

Switching dark theme off

The flyout icon remains white making it difficult to see:

enter image description here

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>
oshirowanen
  • 15,297
  • 82
  • 198
  • 350
  • Does this happen only when you change the system theme while the app is open or does it also stay white when you restart the app? How did you set up the theming in your app? Do you use `AppThemeBinding` and the `UserAppTheme` property? – Julian Oct 30 '22 at 13:10
  • It happens both times, when the system theme is changed while the app is open and when the app is restarted. I am only using the AppThemeBinding property to theme the app. – oshirowanen Oct 30 '22 at 13:18
  • Have you tried modifying the styles for `Shell` in the styles.xaml under `Resources/Styles`? As I can see, the styles of the project template do not provide values for Light and Dark themes for some of the properties, such as `Shell.ForegroundColor`. Could be one of those, haven't tried Shell Flyout in MAUI, yet. There still is a range of bugs, so maybe this is still an issue to be added to the backlog. – Julian Oct 30 '22 at 13:27
  • Which .NET Version and Visual Studio version are you currently using? I'm asking, because for me, changing the system theme doesn't automatically update the `AppThemeBinding`, that only works for me if I set the `UserAppTheme` or when I restart the app after setting the system theme in Android. AFAIK, there still is a bug about this: https://github.com/dotnet/maui/issues/10310 – Julian Oct 30 '22 at 14:14
  • I am using VS2022 v17.3.6 with .NET 6.0. – oshirowanen Oct 30 '22 at 17:29
  • Okay, I'm using VS2022 17.4 Preview 2.1 and.NET 7.0 RC1. Maybe there is or was a regression. I'll follow up on this. – Julian Oct 30 '22 at 20:17

1 Answers1

4

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>
Julian
  • 5,290
  • 1
  • 17
  • 40