Fix .nav-bar-header background color.

[niyari]

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• New feature or enhancement
• UI change (please include screenshot!)
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Internationalization and localization
• Other (please describe):

What is the current behavior?

Issue Number: #1228

What is the new behavior?

• Title bar is non colorized.
  

Other information

note: The splash screen is not affected by this change.

Quality check

Before creating this PR:

• Did you follow the code style guideline as described in CONTRIBUTING.md
• Did you build the app and test your changes?
• Did you check for accessibility? On Windows, you can use Accessibility Insights for this.
• Did you verify that the change work in Release build configuration
• Did you verify that all unit tests pass
• If necessary and if possible, did you verify your changes on:
  • Windows
  • macOS
  • Linux

[veler]

Hi @niyari ,
Thanks for this PR. I think it can cause a problem for users who have the Show accent color on title bar and window borders option turned OFF in Windows Settings. It makes the title bar not having the Mica effect, because the color you defined hides it.

The change you suggest also affect Linux and MacOS, which we should avoid.

Here is a suggestion:

Instead of changing the CSS, let's change the MainWindow.xaml and add a Border behind the CustomBlazorWebView, placed at the top of the window.

This Border could conditionally have a color:

1. When Show accent color on title bar and window borders is OFF, the Border should have a transparent background
2. When ON, the Border should have the same color than the one defined in Windows Settings.

These links can be helpful:

• https://stackoverflow.com/a/69896088
• https://copilot.microsoft.com/sl/dPmg0e0Gq5Y
• https://blog.codeinside.eu/2016/04/26/get-the-windows-10-or-8-accent-color-from-wpf/