MAUI : Dark mode is hiding visual element in IOS

Pratap Singh, Ayush 20

On IOS whenever I am changing system, Light mode to Dark mode, and visit to my maui application , some visual elements are getting dark due to which some labels and other visuals are also hiding. see below attachments for the reference.

download.png download (1).png

1 answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-01-04T08:55:36.3933333+00:00

Hello,

It's a known issue reported at GitHub- [iOS] MAUI Theme breaks when system prompt visible · Issue #19614 · dotnet/maui (github.com)

As described in the issue, you could try handling themes yourself by setting UserAppTheme.

Please see Detect the current system theme and Set the current user theme.

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Pratap Singh, Ayush 20 Reputation points

2024-01-05T07:50:56.27+00:00

@Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.)

I've tried to use AppThemeBidning But Even in Dark mode I am getting Light Mode appearance. Dark mode is not working properly.

<Style x:Key="FrameStyle" TargetType="Frame"> <Setter Property="CornerRadius" Value="12" /> <Setter Property="Margin" Value="0" /> <Setter Property="FlexLayout.Basis" Value="50%" /> <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Green, Dark=Yellow}" </Style>

Please check dark-mode.jpeg file, which is a picture , my system is on Dark mode but still I am getting the value which is set for Light Mode.

Pratap Singh, Ayush 20 Reputation points

2024-01-05T07:55:06.7933333+00:00

I've tried AppthemeBinding but even thoough my Device (IOS/ Android) is on Dark mode. They are detecting only Light mode value.

Please refer dark-mode.jpeg.

<ImageButton Style="{StaticResource ImageStyle}" BackgroundColor="{Binding ItemColor}"/> <Label Grid.Column="1" CharacterSpacing="1" Text="{Binding Title}" Style="{StaticResource LabelStyle}"/> </Grid> </Frame> <Setter Property="CornerRadius" Value="12" /> <Setter Property="Margin" Value="0" /> <Setter Property="FlexLayout.Basis" Value="50%" /> <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Green, Dark=Yellow}" /> </Style>

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-01-05T09:30:42.1133333+00:00

Your settings and styles are right. You could try handling themes like the description in the reported issue.

protected override void OnAppearing() { base.OnAppearing(); Microsoft.Maui.Controls.Application.Current.UserAppTheme = Microsoft.Maui.Controls.Application.Current.RequestedTheme; }

This issue is open at GitHub, please follow the progress.

Pratap Singh, Ayush 20 Reputation points

2024-01-05T10:12:38.2566667+00:00

@Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.)

I've tried OnAppearing method to resolve that but still the same problem persist for the dark mode, it is not fetching value.

I've debug and observed App Theme is detected as Light even though it is in dark mode. check this debug-value.jpeg. This Light value is when the system was on dark mode while debugging.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-01-08T07:56:06.1+00:00

For this, it's suggested that you continue to follow the progress at GitHub- [iOS] MAUI Theme breaks when system prompt visible · Issue #19614 · dotnet/maui (github.com)

And you could add comments at GitHub directly to let them know your any concerns and needs.
Sign in to comment