Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to define a plattform specific, light and dark mode dependent color (for a BarBackgroundColor)

Ralf_gsRalf_gs Member ✭✭
edited August 14 in Xamarin.Forms

I like my Navigation Bars to have different BarBackgroundColor & BarTextColor. It worked fine so far like follows. But now I have problems to alter Colors with regard to OS light mode and dark mode. I thought a solution using "AppThemeBinding" would be logical. I use this concept for all view types. But here it throws an - System.Reflection.TargetInvocationException - I cannot solve. The problem seems to be "Specific cast ist not valid"

Please assist. I searched for solutions in different places. Maybe my thinking/concept is wrong?

//Solution without OS light/dark mode adaption--

//App.xaml.cs

var page = new x_temp.TestStartPage(); //content page
MainPage = new NavigationPage(page)
            {
                Style = (Style)Application.Current.Resources["NavBarStyle"]
            };

//App.xaml

 <Style TargetType="NavigationPage" x:Key="NavBarStyle">  
                <Setter Property="BarBackgroundColor">
                    <Setter.Value>
                        <OnPlatform x:TypeArguments="Color" >
                            <On Platform="Android" Value="#DBE5FA"/>
                            <On Platform="iOS" Value="#FFFFFF"/>
                        </OnPlatform>
                    </Setter.Value>
                </Setter>
        </Style>

//Attempt with OS light/dark mode adaption

        <Style TargetType="NavigationPage" x:Key="NavBarStyle">  
            <Setter Property="BarBackgroundColor">
                <Setter.Value>
                    <OnPlatform x:TypeArguments="Color" >
                         <On Platform="Android" Value="_{AppThemeBinding
                            Light=#DBE5FA,
                            Dark=#584F4F,
                            Default=#DBE5FA}"_/>
                        <On Platform="iOS" Value="_{AppThemeBinding
                            Light=#FFFFFF,
                            Dark=#584F4F,
                            Default=#FFFFFF}"_/>
                    </OnPlatform>
                </Setter.Value>
            </Setter>
        </Style>

Best Answer

Answers

  • Ralf_gsRalf_gs Member ✭✭

    Please ignore die underscores in the last code example. Those were added as I tried to put the text to italic.

  • Ralf_gsRalf_gs Member ✭✭

    @ColeX Thanks for your efforts. I tried and adapted the second solution and it works for me. You were of great help!

Sign In or Register to comment.