CODEWITHSUNDEEP
c#xamlmauiapp-themes
KoMa
KoMa

Reputation: 43

Theme doesn't change correctly in maui for elements with no background when the system theme is black

When changing the theme of the OS, the application normally does not display all entries. I tried to change the background of the entry, but then the frames are not visible on iOS, and if it is empty (without a placeholder), then it will be extremely difficult to find it. Added Application.Current.UserAppTheme = AppTheme.Light to the App.xaml.cs file.

Screenshot.

The problem is present on both iOS and Android.

Upvotes: 1

Views: 3390

Answers (3)

AntonioHL
AntonioHL

Reputation: 718

I'm using .NET8 (maui.net app), and VS2022 17.12.0 preview 5.0 (11/2024); and the "Entry" control does not change dynamically color when I set the "Microsoft.Maui.Controls.Application.Current.UserAppTheme=Dark|Light|unspecified" in code, with this way the application will not respond to Android Settings changes in Dark Mode "ON" or "OFF". In this case, I have tried to set the page as "transient", but do not worked. The TextColor property of Entry control does not changes automatically (the changes are controlled by Style element in "Resources\Styles\Style.xaml")

<Style TargetType="Entry">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14" />
<Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
<Setter Property="MinimumHeightRequest" Value="44"/>
<Setter Property="MinimumWidthRequest" Value="44"/>
<Setter Property="VisualStateManager.VisualStateGroups">
    <VisualStateGroupList>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="Disabled">
                <VisualState.Setters>
                    <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateGroupList>
</Setter>

This works for me, create a new "Page" in code.

//in this way the Entry control do not changes the "TextColor" dynamically
//Shell.Current.GoToAsync("//SettingPage");
var setPage = new SettingPage(viewController);
await Navigation.PushAsync(setPage); //OK

Upvotes: 0

KoMa
KoMa

Reputation: 43

As it turned out, the problem is that I use a custom entry in which I do not specify a background color, after setting it to Transparent, the entry is displayed normally, except that there is no frame around (ios) and underlining (android). So far I just wrapped the record in a border and it works.

I'll leave the question open for now, maybe someone will find a more elegant solution to the problem

Update: I stumbled upon this article and after trying this method, I no longer met the dark theme https://learn.microsoft.com/en-us/answers/questions/231994/disable-dark-mode-in-xamarin-forms-4-8

Upvotes: 0

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8035

An easy way to respond to system theme change is use AppThemeBinding markup extension.

<Entry BackgroundColor="{AppThemeBinding Light=Green, Dark=Yellow}"/>

or you may use Style:

<Style TargetType="Entry" x:Key="EntryStyle">
    <Setter Property="BackgroundColor"
            Value="{AppThemeBinding Light={StaticResource LightNavigationBarColor}, Dark={StaticResource DarkNavigationBarColor}}" />
</Style>

For more info, you could refer to Respond to system theme changes

Upvotes: 0

Related Questions