Xamarin Forms Shell bind flyout icon theme aware

Question

I have a Xamarin Forms Shell Application with a flyout. My entries are defined like this:

<FlyoutItem Title="{x:Static resources:Strings.DashboardTitle}" FlyoutIcon="ic_dashboard_black">
    <Tab>
        <ShellContent>
            <dashboard:DashboardPage />
        </ShellContent>
    </Tab>
</FlyoutItem>

This works so far as the icons is shown. But to support light and dark theme I would like for example to be able to bind that with an AppThemeBinding. Is that possible? Or how would I theme the icons in the flyout?

Jack Hua Jack Hua · Accepted Answer · 2020-07-28T01:56:34

You can use AppThemeBinding markup extension to define image source under light/dark mode:

<FlyoutItem Title="{x:Static resources:Strings.DashboardTitle}" FlyoutIcon="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}">
    <Tab>
        <ShellContent>

        </ShellContent>
    </Tab>
</FlyoutItem>

The following requirements must be met for Xamarin.Forms to respond to a system theme change:

Xamarin.Forms 4.6.0.967 or greater.
iOS 13 or greater.
Android 10 (API 29) or greater.
UWP build 14393 or greater.

Responding to a system theme change is currently experimental, and can only be used by setting the AppTheme_Experimental flag.

Refer: Enable flags in platform projects

Xamarin Forms Shell bind flyout icon theme aware

1 Answers