Theming Syntaxes

app.js

app.config(function($mdThemingProvider) {
  
  // Allow defining of custom palettes (see below for usage)
  $mdThemingProvider
    .definePalette('customPaletteName', {
      '50': '#FFFFFF',
      '100': '#FFFFFF',
      '200': '#FFFFFF',
      '300': '#FFFFFF',
      '400': '#FFFFFF',
      '500': '#FFFFFF',
      '600': '#FFFFFF',
      '700': '#FFFFFF',
      '800': '#FFFFFF',
      '900': '#FFFFFF',
      'A100': '#FFFFFF',
      'A200': '#FFFFFF',
      'A400': '#FFFFFF',
      'A700': '#FFFFFF'
    })
    // Provide an extendPalette method to make it easy to change a few colors in an existing palette
    .definePalette('extendedPaletteName', $mdThemingProvider.extendPalette('blue', {
      'A100': '#777777'
    });
  
  // Blue, pink, red, etc. built in (based on material spec)
  var defaultTheme = $mdThemingProvider.theme('default');
  defaultTheme
    .primaryColor('blue', {
      default: '500',
      'hue-1': '100',
      'hue-2': '300',
      'hue-3': 'A100'
    })
    .accentColor('customPaletteName')
    .warnColor('red');
  
  var secondTheme = $mdThemingProvider.theme('second', defaultTheme); // second argument to inherit from a theme
  // could also do $mdThemingProvider.theme('second', 'default') where 'default' is theme name.
  secondTheme.primaryColor('green');
});

sample.html

<!-- md-theme directive is used much less as you should be using default, one theme per app -->

<div>
  <md-button class="md-hue-1">
    Click Me
  </md-button>
  <md-button class="md-fab md-accent md-hue-3">
    <md-icon src="you-wish.svg"></md-icon>
  </md-button>
  <md-button class="md-warn">
    Click Me
  </md-button>
</div>

<!-- still allow specifying a second theme, but should really only be used
  for advanced applications. Most applications will not need this -->
<div md-theme="second">
  <md-button class="md-primary hue-1">This will be green</md-button>
</div>