MAUI: Background color is not updating when changing the mode (iOS)

Question

When changing the mode I am updating the background color and text color of the UI via code. It was working fine on Android side but when I check it on iOS, the Listview background color is not updating properly.

Expected Output of light and dark mode is below

Current output in iOS:

My Codes:

When changing the mode I am sending WeakReferenceMessenger from mode page

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");
}

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>

When changing mode, I am updating the color of homelistview and home_layout but it is not updating completely. When changing from light to dark, white color is showing for the Listview instead of darkcolor and when changing from dark to light a darkcolor is showing for the listview instead of white color. The issue is only on ios platform and working fine in Android platform.

Answer 1

Hello,

You have a Grid that wraps the frame, but you didn't set BackgroundColor for it. Please bind a BGColor and set the BackgroundColor of Frame to "#e4e4e4".

<ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid BackgroundColor="{Binding BGColor}">
                                    <Frame
                                        HasShadow="False"
                                        Padding="8"
                                        CornerRadius="{OnIdiom Phone=20, Tablet=30}"
                                        BorderColor="#bdbdbd"
                                        Margin="5"
                                        BackgroundColor="#e4e4e4">
                                       <StackLayout
                                            VerticalOptions="FillAndExpand"
                                            Margin="5,0,5,0"
                                            Orientation="Horizontal">

Also, you should set different BGColor in Light Mode and Dark Mode, and you don't have to set the homelistview.BackgroundColor.

Please refer to the following code:

private void SetMode()
    {
        try
        {
            mode = Preferences.Default.Get("mode", "light");
            if (mode == "light")
            {
                LightMode();
                SetHomePageOptions();
            }
            else if (mode == "dark")
            {
                DarkMode();
                SetDarkHomePageOptions();//set different PageOptions according to Mode
            }
        }
        catch (Exception e)
        {
            ...
        }
      
    }
   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");
       
   }
   private void SetHomePageOptions()
    {
        homeList.Clear();
        homeList.Add(new HomeResponse() { Title = "Option 1", BGColor = Colors.White, TextColor = Colors.Black, ImageSource = "ic_black_right_arrow_xx.png" });
      ...
        //Color.FromArgb("#e4e4e4")
        homelistview.ItemsSource = homeList;
    }
   private void SetDarkHomePageOptions()
    {
        homeList.Clear();
        homeList.Add(new HomeResponse() { Title = "Option 1", BGColor = Color.FromArgb("#434343"), TextColor = Colors.Black, ImageSource = "ic_black_right_arrow_xx.png" });
       ...
        homelistview.ItemsSource = homeList;
    }

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.

Answer 2

@Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) When we change the mode, the listview is not completely filled. This issue is fixed by changing the Listview to Collection View.