Theme Picker

<div layout="column" ng-cloak="" ng-controller="ThemeDemoCtrl" class="md-padding colorsdemoThemePicker" ng-app="MyApp">
  <p>
    从中选择一个颜色 <a class="md-accent" href="{{mdURL}}">主题颜色调色板</a>
   在下面:
  </p>
  
  <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>
  
  <p style="padding-top: 20px;">
   下面是自定义的颜色 <code><theme-preview></code> 组件
    更新的 <code><md-colors></code>
  </p>
  
  <div layout="row" class="section" layout-align="center center">
    <div layout="column" flex="50">
      <span class="componentTag"><theme-preview></span>
      <theme-preview primary="primary" accent="accent"></theme-preview>
    </div>
  </div>
  
  <p class="footnote">
   注意，前台颜色会自动确定（从主题配置）

基于指定的背景调色板选择。当然，你可以很容易地重写

前景颜色也...
  </p>