PureWeen/ShanedlerSamples

iOS Navbar no longer respects dark mode background color selection in apptheming

edgiardina opened this issue ยท 7 comments

I pulled this package into my project here:
https://github.com/edgiardina/IfpaMaui

I have the following styles for my NavBar:

<Style TargetType="TabBar">
        <!-- Nav Bar Properties (Top) -->
        <Setter Property="Shell.ForegroundColor" Value="{StaticResource IconAccentColor}" />
        <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource BarBackgroundColor}, Dark={StaticResource BarBackgroundColorDark}}" />
        <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource PrimaryTextColor}, Dark={StaticResource PrimaryTextColorDark}}" />       
      
        <!-- Tab Bar Properties (Bottom) -->
        <Setter Property="Shell.TabBarBackgroundColor"
            Value="{AppThemeBinding Light={StaticResource BarBackgroundColor}, Dark={StaticResource BarBackgroundColorDark}}" />
        <Setter Property="Shell.TabBarTitleColor"
            Value="{StaticResource IconAccentColor}" />
        <Setter Property="Shell.TabBarUnselectedColor"
            Value="{StaticResource SecondaryTextColor}" />
    </Style>
    ```
    
    ```
        <Color x:Key="BarBackgroundColorDark">#191919</Color>
        <Color x:Key="BarBackgroundColor">#f6f6f6</Color>
     ```

However, the Shell.BackgroundColor is now appearing white while I'm in Dark Mode. 

Guess it looks straightforward, do we have to declare white here?

navigationBarAppearance.BackgroundColor = UIColor.White; // Set the background color you want on the Shell NavBar

I reverted the toolbartracker that was setup in there back to the default maui one

@PureWeen maybe the updated workaround provided by our friend @borrmann suggested right after my comment could work, I would suggest to set the BackgroundColor using a saved status, so stuff like AppThemeBinding should still work

public void SetAppearance(UINavigationController controller, ShellAppearance appearance)
    {
        var navBar = controller.NavigationBar;
        var col = navBar.BackgroundColor;
        var navigationBarAppearance = new UINavigationBarAppearance();
        navigationBarAppearance.ConfigureWithOpaqueBackground();
        navigationBarAppearance.ShadowColor = UIColor.Clear;
        navigationBarAppearance.BackgroundColor = col; 
        navBar.ScrollEdgeAppearance = navBar.StandardAppearance = navigationBarAppearance;
    }

Just wanted to share my grain of salt.

Thank you all ๐Ÿ˜€

@PureWeen maybe the updated workaround provided by our friend @borrmann suggested right after my comment could work, I would suggest to set the BackgroundColor using a saved status, so stuff like AppThemeBinding should still work

public void SetAppearance(UINavigationController controller, ShellAppearance appearance)
    {
        var navBar = controller.NavigationBar;
        var col = navBar.BackgroundColor;
        var navigationBarAppearance = new UINavigationBarAppearance();
        navigationBarAppearance.ConfigureWithOpaqueBackground();
        navigationBarAppearance.ShadowColor = UIColor.Clear;
        navigationBarAppearance.BackgroundColor = col; 
        navBar.ScrollEdgeAppearance = navBar.StandardAppearance = navigationBarAppearance;
    }

Just wanted to share my grain of salt.

Thank you all ๐Ÿ˜€

@vhugogarcia what's the intent of NoLineAppearanceTracker ? Does the titleView fix you have not quite work without it?

That is correct. I tried a few options without luck and this one worked. Honestly this was like try and catch thing. I found some people used the NoLineApparanceTracker and then I tried it and it worked.

I hardcoded the background to white, since the app was not required to be in dark mode. However, the solution our friend added to allow dark mode is better to support app theming ๐Ÿ™‚

That is correct. I tried a few options without luck and this one worked. Honestly this was like try and catch thing. I found some people used the NoLineApparanceTracker and then I tried it and it worked.

I hardcoded the background to white, since the app was not required to be in dark mode. However, the solution our friend added to allow dark mode is better to support app theming ๐Ÿ™‚

Interesting!

I'll need to play with it a bit to see what interferes.
I have a number of fixes in our main branch around the iOS titlebar I'm hoping to replicate here as well.

Maybe that'll unite all the worlds

@edgiardina closing this for now.

I pushed up a version with the mostly latest TitleView stuff from our main MAUI branch.

If you hit any issues please let me know.