The ripple effect behaves strange when changing system theme without fully exit app in Android

[OliveInto]

The color of the ripple effect seems to remain at the light value when change the system theme to dark, which causes the ripple effect nearly undiscoverable.

[Redth]

Can you describe the steps here to observe this in a bit more detail?

[OliveInto]

untitled.webm
untitled2.webm

Please compare the ripple effects in the two video. The first one starts the app in dark mode, and the second starts the app in light mode and changes to dark mode manually, the ripple color of the two seems to be different. And they should be same.

[Redth]

Can you share the code you're using? What colour are you expecting it to be?

I'm still not fully understanding what behaviour you're looking for, so a project and a description of the expected behaviour would help.

I'm guessing the colour might change based on system themes/colours, but it may be possible to influence this more explicitly... One way likely is to do so with android platform styles...

[OliveInto]

I made a clean project with this packet referenced only. As you can see from the video, the ripple effect at 0:13 is different with the effect at 0:26. The only change I made is that I changed the system theme manually. Firstly I started the app with light mode and press the button in dark mode when I changed to dark, and secondly, I started the app with dark mode directly, and press the button.

untitled.mp4

<ContentPage
    x:Class="Ripple.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mcb="http://schemas.microsoft.com/dotnet/2024/maui/contentbutton">
    <ScrollView>
        <VerticalStackLayout Padding="30,0" Spacing="25">
            <Image
                Aspect="AspectFit"
                HeightRequest="185"
                SemanticProperties.Description="dot net bot in a hovercraft number nine"
                Source="dotnet_bot.png" />

            <Label
                SemanticProperties.HeadingLevel="Level1"
                Style="{StaticResource Headline}"
                Text="Hello, World!" />

            <Label
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                SemanticProperties.HeadingLevel="Level2"
                Style="{StaticResource SubHeadline}"
                Text="Welcome to &#10;.NET Multi-platform App UI" />

            <Button
                x:Name="CounterBtn"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill"
                SemanticProperties.Hint="Counts the number of times you click"
                Text="Click me" />


            <mcb:ContentButton HeightRequest="80">
                <Grid BackgroundColor="Gray" ColumnDefinitions="*,*">
                    <Label
                        FontSize="30"
                        HorizontalTextAlignment="Center"
                        Text="Content1"
                        TextColor="{AppThemeBinding Dark=White,
                                                    Light=Black}" />
                </Grid>
            </mcb:ContentButton>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

[Redth]

Thanks for the extra info, I think I understand a bit better what's going on here. Interestingly this is also something happening in normal MAUI buttons (I just use the same methods that are there), but it's a bit inverted which seems to be due to me using MaterialCardView instead of MaterialButton.

Will do some thinking on this one.