Xamarin.forms: [Bug] Shell NavBar BackgroundColor

[Alkhajeh]

Description

Navbar Color set using Shell.BackgroundColor is not accurate.

Steps to Reproduce

1. Set background color of shell using Shell.BackgroundColor

Expected Behavior

Correct color.

Actual Behavior

Color is lighter than actual

Basic Information

• Version with issue: 4.0.0.425677
• IDE: Visual Studio for MAC 8.0.7
• Platform Target Frameworks:
  
  
  
  • iOS: 12.2
  
  

<Style x:Key="BaseStyle"
           ApplyToDerivedTypes="True"
           TargetType="Element">
        <Setter Property="Shell.FlyoutBackgroundColor"
                Value="White" />
        <Setter Property="Shell.BackgroundColor"
                Value="#2f353a" />
        <Setter Property="Shell.ForegroundColor"
                Value="White" />
        <Setter Property="Shell.TitleColor"
                Value="White" />
        <Setter Property="Shell.DisabledColor"
                Value="#B4FFFFFF" />
        <Setter Property="Shell.UnselectedColor"
                Value="#95FFFFFF" />
    </Style>

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
       xmlns:local="clr-namespace:ABC" 
       xmlns:controls="clr-namespace:ABC.Controls"
       xmlns:views="clr-namespace:ABC.Views"
       x:Name="self"
       Title="Shelltest" x:Class="ABC.AppShell" Style="{StaticResource BaseStyle}">

   <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
    <FlyoutItem Title="Home" FlyoutIcon="icons8_home_30.png" FlyoutDisplayOptions="AsSingleItem">
       <!-- <ShellContent>
            <views:HomePage />
        </ShellContent>-->
        <Tab Title="Dashboard" Icon="icons8_home_30.png">
            <ShellContent>
                <views:HomePage />
            </ShellContent>
        </Tab>
        <Tab Title="Page1" Icon="icons8_user_shield_30.png">
            <ShellContent>
                <views:Page1 />
            </ShellContent>
        </Tab>
    </FlyoutItem>

Screenshots

Color in display:

Color without using shell:

Actual Color:

Reproduction Link

[samhouts]

@Alkhajeh Can you please attach a small project that demonstrates this issue? Thanks!

[Robtom5]

Hi @samhouts, I've updated my bug demo I made for #6373 to show this issue as well
https://github.com/Robtom5/XamarinBugDemo-6373

This is shown by selecting item2 on the flyout

[jfversluis]

Verified reproduction, there is indeed a difference in color. It seems a PR (#6239) is already fixing this.

[simonemarra]

+1

[Robtom5]

@jfversluis the above linked PR has been closed with no changes as far as i can see. Any other progress for fixing this as the difference is quite stark when using some colors

[jfversluis]

Sorry about that @Robtom5! Seems there is no PR attached to this issue at this time.

[Woofo]

Here's a workaround for anyone still struggling with this: https://forums.xamarin.com/discussion/comment/383797/#Comment_383797