Setting button IsEnabled to 'true' does not dynamically change background color to match dark/light theme

[babenkovitaliy]

Description

I have an issue:

• When an application has two buttons where one is enabled and one is disabled
• When the disabled button gets programmatically enabled, it looks fine.
• However, once the user dynamically changes the theme to light or dark, the button theme doesn't change to the new dark/light mode.

Real life scenario:

• I have an application that requires a user to sign in, in order to use certain features. By default, some buttons are disabled until a successful authentication completes. By default, the application is in light mode.
• Once authentication completes, those buttons are enabled. It looks fine.
• On the top of my application, I have button that will toggle between light and dark mode. Once the user clicks on the button to toggle into dark mode, the newly enabled buttons are still left in light mode style.

Screen.Recording.2023-08-04.at.12.23.29.AM.mov

Steps to Reproduce

1. Create new MAUI application.
2. Open MainPage.xaml that was auto generated. We will modify everything between the to this:

    <ContentPage.Resources>
        <x:String x:Key="SwitchToLightString">Switch to Light Mode</x:String>
        <x:String x:Key="SwitchToDarkString">Switch to Dark Mode</x:String>

    </ContentPage.Resources>

    <VerticalStackLayout>
        <Button x:Name="btnSwitchMode"
                Clicked="btnSwitchMode_Clicked"
                Margin="0,2,0,2"
                Text="{AppThemeBinding Dark={StaticResource SwitchToLightString}, Light={StaticResource SwitchToDarkString}}"/>

        <Button x:Name="btnEnableButtonBelow"
                Clicked="btnEnableButtonBelow_Clicked"
                Margin="0,2,0,2"
                Text="Enable Button Below"/>

        <Button x:Name="btnInitiallyDisabledButton"
                IsEnabled="False"
                Margin="0,2,0,2"
                Text="Initially Disabled Button"/>

    </VerticalStackLayout>

3. Then, we will change everything in the MainPage.xaml.cs file to this:

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();

        App.Current.UserAppTheme = AppTheme.Dark;
	}

    void btnSwitchMode_Clicked(System.Object sender, System.EventArgs e)
    {
        if (App.Current.UserAppTheme is AppTheme.Dark)
            App.Current.UserAppTheme = AppTheme.Light;
        else
            App.Current.UserAppTheme = AppTheme.Dark;
    }

    void btnEnableButtonBelow_Clicked(System.Object sender, System.EventArgs e)
    {
        btnInitiallyDisabledButton.IsEnabled = true;
    }
}

4. Run the application in Debug mode. It will be set at a dark mode (we set that in the constructor)
5. Click on the middle button to enable to last button. Everything should still look fine.
6. Click on the top button to change to light mode. Now you will see the issue - the second/middle button and the last button are both enabled. However, they have different styles.

Link to public reproduction project repository

No response

Version with bug

7.0.92

Last version that worked well

7.0.92

Affected platforms

macOS

Affected platform versions

MacOS Ventura 13.4.1

Did you find any workaround?

Do not allow the user to dynamically change the theme. You can allow the user to change the theme, but require the application to be closed and reopened in order for the application theme to update to the requested dark/light theme.

Relevant log output

No response

[babenkovitaliy]

Some fun facts about this bug:

• The culprit is in Resources\Styles\Styles.xaml. In the Button VisualStateGroup, there is this line: <VisualState x:Name="Normal" />. The runtime (whatever is powering MAUI/XAML) understands that it should revert to the default setters set in the Styles.xaml file, but it does not seem to understand that the 'TextColor' and 'BackgroundColor' have AppThemeBinding values (which is supposed to make a certain property like 'BackgroundColor' a dynamic value based on the app theme.
• Related to the bullet point above, I see a slew of other controls in Styles.xaml file that have the same setup (e.g. CheckBox, DatePicker etc.). I have not had a chance to test out if those controls have the same issue, but I would assume that they do.

[StephaneDelcroix]

we lately merged a large change that should affect this, I need to retest on top of main branch

[MartyIX]

@StephaneDelcroix Which PR do you have in mind? #13818?

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[StephaneDelcroix]

I can reproduce this, even with the setter specificity changes