angular-material-npfixed/src/components/colors/demoThemePicker/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div layout="column" ng-cloak ng-controller="ThemeDemoCtrl" class="md-padding">
  <p>
    Select a color from the <a class="md-accent" href="{{mdURL}}">Theme Color Palettes</a>
    below:
  </p>
  <!-- Theme Options -->
  <div layout="row" layout-wrap layout-align="center center">
    <md-button ng-repeat="color in colors" flex-gt-md="15" flex="30"
               md-colors="{background: '{{color}}'}" md-colors-watch="false"
               ng-disabled="primary === color && !isPrimary" ng-click="selectTheme(color)">
      {{color}}
    </md-button>
  </div>
  <!-- Footnote -->
  <p style="padding-top: 20px;">
    Shown below are the colors of the custom <code>&lt;theme-preview&gt;</code> component that
    were updated by <code>&lt;md-colors&gt;</code>
  </p>
  <!-- Theme Preview -->
  <div layout="row" class="section" layout-align="center center">
    <div layout="column" flex="50">
      <span class="componentTag">&lt;theme-preview&gt;</span>
      <theme-preview primary="primary" accent="accent"></theme-preview>
    </div>
  </div>
  <!-- Footnote -->
  <p class="footnote">
    Notice that the foreground colors are automatically determined (from the theme configurations)
    based on the specified background palette selection. Of course, you could easily override the
    foreground color also...
  </p>

</div>