I want to display a different image depending on the system theme mode. I’m creating a simple money counter app where I use a CollectionView to display various fields in which the user type the quantity of a certain bill/coin, and it shows the total value. Each item also shows an image of the current bill/coin. I created two versions for each item, one for dark mode, one for light mode.

I’m using the following DataTemplate:

<DataTemplate x:Key="TemplateDinheiro" x:DataType="model:DinheiroModel">

    <Frame BorderColor="{AppThemeBinding Light={StaticResource Secondary}}" 
           BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource PrimaryDark}}" 
           Margin="10, 5, 10, 5" Padding="10" HeightRequest="90">
        
        <Grid ColumnDefinitions="2*, 3*, 1*" RowDefinitions="6*, 4*" ColumnSpacing="10">

            <Frame Grid.RowSpan="2" BorderColor="{AppThemeBinding Light={StaticResource Secondary}}">
                <Image Scale="2.2">
                    <Image.Source>
                        <AppThemeBinding Light="{Binding CaminhoDoIconeLight}" Dark="{Binding CaminhoDoIconeDark}"/>
                    </Image.Source>
                </Image>
            </Frame>

            <Frame BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}" 
                   BorderColor="{AppThemeBinding Light={StaticResource Secondary}}" Grid.Column="1" Padding="10, 0, 10, 0">
                
                <Entry Keyboard="Numeric" 
                       Text="{Binding Quantidade}" 
                       TextColor="{AppThemeBinding Light={StaticResource Text}, Dark={StaticResource TextDark}}" 
                       MaxLength="4"/>
            </Frame>
            
            <Button BackgroundColor="Transparent"  Grid.Column="2" 
                    Command="{Binding DeletarCommand, Source={RelativeSource AncestorType={x:Type viewmodel:ContagemViewModel}}}"
                    CommandParameter="{Binding .}"
                    ImageSource="{AppThemeBinding Light=trashlight.png, Dark=trashdark.png}"
                    Scale="1.1"/>

            <Label Text="{Binding ValorTotal, StringFormat='R$ {0:#,0.#0}'}"
                   TextColor="{AppThemeBinding Light={StaticResource Text}, Dark={StaticResource TextDark}}"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="End"
                   FontFamily="InterMedium"
                   Grid.Row="1" 
                   Grid.Column="1"
                   Grid.ColumnSpan="2"/>

        </Grid>   
    </Frame>
    
</DataTemplate>

This is the model it is binded to:

public partial class DinheiroModel : ObservableObject
{
    public double Valor { get; set; }

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(ValorTotal))]
    private int quantidade;

    public double ValorTotal => Valor * Quantidade;

    public string CaminhoDoIconeLight { get; set; }
    public string CaminhoDoIconeDark { get; set; }

    public DinheiroModel(double valor, string caminhoDoIconeLight, string caminhoDoIconeDark)
    {
        Valor = valor;
        quantidade = 0;
        CaminhoDoIconeLight = caminhoDoIconeLight;
        CaminhoDoIconeDark = caminhoDoIconeDark;
    }
}

In the ViewModel, each item is instantiated like this:

new DinheiroModel(0.05, "cinco_centavos_light.png", "cinco_centavos_dark.png")

However, the image is not displayed at all. What am I doing wrong?