Matthew Pans
Matthew Pans

Reputation: 795

.NET MAUI: The light and dark modes are not properly updating on the iOS platform

When I switch the mode from light to dark or dark to light on the Home page, the mode does not properly change on the iOS platform but works fine on the Android platform. That means on the home page, the outer frame is updating based on the mode, but the inner frame is not updating based on the mode. But when I close the app and again open the app, the home page is properly updated based on the mode. Below, I am adding a screenshot of the issues in both modes.

Screenshots:

Light Mode:

enter image description here

Dark Mode:

enter image description here

I am using the below code changing the mode.

public async void ChangetoLight(object sender, EventArgs e)
{
    try
    {
        WeakReferenceMessenger.Default.Send(new ModeChangeMessage("modechanged"));
    }
    catch (Exception exc)
    {
        System.Diagnostics.Debug.WriteLine("Exception:>>" + exc);
    }
}

public async void ChangetoDark(object sender, EventArgs e)
{
    try
    {
        WeakReferenceMessenger.Default.Send(new ModeChangeMessage("modechanged"));
    }
    catch (Exception exc)
    {
        System.Diagnostics.Debug.WriteLine("Exception:>>" + exc);
    }
}

The above WeakReferenceMessenger is subscribed on the Home page:

WeakReferenceMessenger.Default.Register<ModeChangeMessage>(this, (r, m) =>
{
    if (m.Value == "modechanged")
    {
        SetMode();
    }
});

private void SetMode()
{
    try
    {
        mode = Preferences.Default.Get("mode", "light");
        if (mode == "light")
        {
            LightMode();
        }
        else if (mode == "dark")
        {
            DarkMode();
        }
    }
    catch (Exception e)
    {
        System.Diagnostics.Debug.WriteLine("Exception:>>" + e);
        Preferences.Default.Set("mode", "light");
        mode = "light";
        LightMode();
    }
}

private void LightMode()
{
    home_layout.BackgroundColor = Colors.White;
    homelistview.BackgroundColor = Colors.White;
}

private void DarkMode()
{
    home_layout.BackgroundColor = Color.FromArgb("#434343");
    homelistview.BackgroundColor = Color.FromArgb("#434343");
}

After mode change we are updating the color of homelistview and home_layout. But as per the above screenshot the color is not updating.

ListView XAML:

<Frame
    Grid.Row="0"
    Style="{StaticResource InnerFrameStyle}"
    x:Name="home_layout">

    <ListView   
        x:Name="homelistview"
        HasUnevenRows="True"
        SelectionMode="None"
        Margin="10"
        CachingStrategy="RecycleElement"
        ItemTapped="HomeOptionsTapped"
        SeparatorVisibility="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <Grid>
                            <Frame
                            HasShadow="False"
                            Padding="8"
                            CornerRadius="{OnIdiom Phone=20, Tablet=30}"
                            BorderColor="#bdbdbd"
                            Margin="5"
                            BackgroundColor="{Binding BGColor}">

                                <StackLayout 
                                VerticalOptions="FillAndExpand"
                                Margin="5,0,5,0"
                                Orientation="Horizontal">

                                    <Label 
                                    Text="{Binding Title}"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="CenterAndExpand"
                                    TextColor="{Binding TextColor}">
                                    </Label>

                                    <Image 
                                    Source="{Binding ImageSource}"
                                    VerticalOptions="CenterAndExpand"
                                    HorizontalOptions="Start">
                                    </Image>
                                </StackLayout>
                            </Frame>
                        </Grid>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

        <ListView.Footer>
            <Label/>
        </ListView.Footer>
    </ListView>
</Frame>

Can you please provide me with a solution to resolve this issue? This issue is only on iOS platform.

Update

I have created a sample project and uploaded it here. Click on any option and change the mode. The UI is not updating LIVE, but updating when reopens the app.

We tried setting the Backgroundcolor as per your suggestion, but no luck. Please check the below screenshot.

Expected UI:

enter image description here

Current UI:

enter image description here

Upvotes: 0

Views: 270

Answers (1)

Matthew Pans
Matthew Pans

Reputation: 795

This issue is fixed and fixed with the below link

Upvotes: 0

Related Questions