Material: feat(nav-bar): support theming features

[devLaaziz]

how i can set md-primary style to md-nav-bar

[devversion]

This is currently not possible, but would be a necessary enhancement.

[gmoothart]

Yeah, like md-tabs it takes the accent color. md-colors (slated for 1.1) will give you more freedom to specify the colors.

[sudosean]

Hi I am trying to style the nav item with md-colors and it does not seem to work:

md-colors did work on md-nav-bar however: md-nav-bar md-colors="{background: 'primary-400'}"

[jschleining]

The workaround I am creating right now is to create a second theme with the preferred palette set to accent. Then just apply the new theme to the md-nav-bar using md-theme. Note that this still uses the light colors in the palette, so you may have to adjust accordingly (I cheated horribly and created a new palette with all color presets set to the desired color). This is definitely not an ideal solution, and Im working on coming up with something better, but at least it is something for now that doesnt involve overwriting angular material's css

$mdThemingProvider.definePalette('altBlue', {
  '50': '#2196f3',
  '100': '#2196f3',
  '200': '#2196f3',
  '300': '#2196f3',
  '400': '#2196f3',
  '500': '#2196f3',
  '600': '#2196f3',
  '700': '#2196f3',
  '800': '#2196f3',
  '900': '#2196f3',
  'A100': '#2196f3',
  'A200': '#2196f3',
  'A400': '#2196f3',
  'A700': '#2196f3',
  'contrastDefaultColor': 'light',
  'contrastDarkColors': '50 100 200 300 400 A100 A200 A400'
});

$mdThemingProvider.theme('altTheme1')
  .primaryPalette('altBlue')
  .accentPalette('altBlue');

<md-nav-bar md-selected-nav-item="" nav-bar-aria-label="" md-theme="altTheme1">
  <md-nav-item md-nav-sref="" name="">label here</md-nav-item>
</md-nav-bar>

[jacobscarter]

+1 @seanlarge @gmoothart on the md-color issue for nav bar