Angular Material md-card-header background

Question

I am developing a small AngularJS application using angular-material. The problem is I cannot figure out how to properly set the background-color of the md-card-header using the color palette defined in my config.

$mdThemingProvider.theme('default')
    .primaryPalette('blue')
    .accentPalette('pink');

Basically I want to set the primary color as the background color of the card header. I could of course copy the RGB value, create a class and set the color using this class. However, I would loose the benefit of changing the theme at runtime or at least I would have to manually change the color whenever I change my theme.

How can I set md-colors to any element, especially the md-card-header?

Solution

You can not color backgrounds in angular-material as of yet. For your example I would work around this by using a md-toolbar. You can use class="md-warn/md-primary/md-accent"to style it with the colors from your palette.

<md-card>
  <md-toolbar class="md-warn" style="border-radius: 3px 3px 0 0">
    <md-card-header>
      <md-card-avatar>
        <img class="md-user-avatar" src="...">
        </md-card-avatar>
        <md-card-header-text>
          <span class="md-title">User</span>
          <span class="md-subhead">subhead</span>
        </md-card-header-text>
      </md-card-header>
    </md-toolbar>

Update:

Angular-material just added a color service and a directive to use the colors defined in a theme anywhere in your code (1.1.0-rc4).

You can now do <md-card-header md-colors="::{backgroundColor: 'default-primary-700'}">.

I updated the codepen.

http://codepen.io/kuhnroyal/pen/pygvyR

Comments

[kTn]

check material.angularjs.org/latest/api/directive/mdCard Card is built with: point . can not add md-toolbar inside md-card

[LordTribual]

What a shame. Well, then I have to use a custom class to color the card header.

[kuhnroyal]

@ktn Of course you can add it, same way you can add md-button and most other directives. It may not be meant to be used that way, but it is the only workaround available at the moment.