[Igx-navbar] The icon buttons' color doesn't match the title text color when changing to the material dark theme

[PlamenD95]

Description

When using the material dark theme, the color of the icon buttons doesn't match the black color of the title text for the navigation bar:

The correct color is properly assigned to the igx-navbar css class:

However, it gets overwritten by the igx-icon-button class for the icon buttons:

• igniteui-angular version: 17.2.0
• browser: Chrome 126.0.6478.185

Steps to reproduce

1. Add the igx-navbar component in an application
2. Use the material dark theme.

Result

There is a mismatch between the colors of the icon buttons and the title text of the navigation bar. The icon buttons are white, while the title text is black,

Expected result

Both the icon buttons and the title text should be black.

[simeonoff]

@PlamenD95 17.2.0 is no longer supported, however, the issue is still (partially) reproducible in 18.1.0.

[sdimchevski]

I've discussed this issue with the Design team and we've worked on a solution. The problems that we have with the icon buttons in the Navbar are in Material and Indigo. What we propose is not to change the icon buttons in the context of the Navbar but change the Navbar styling instead. The changes are discussed with @simeonoff and @andiesm813 as well.

@kdinev To keep the icon buttons styling (flat, outlined and contained) intact, these are the changes that we want to make:

Material:

• The Navbar background color will be updated to primary 400 in Light mode and primary 800 in Dark mode
• The title color in Dark mode will be changed to white

Indigo:

• The Navbar background color will be updated to surface light in Light mode and surface dark in Dark mode
• The title color in Light mode will be changed to grays 800
• A bottom border will be added to the Navbar - 1px solid primary.500 in Light mode and 1px solid primary.200 in Dark mode

Here are a few design patterns, showcasing the applied changes in

Material

Indigo

[kdinev]

@sdimchevski Looks good to me!