Theme Picker

index.html

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

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

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

<script type="text/ng-template" id="themePreview.tmpl.html"><div layout="column">
  <div md-colors="{background: '{{primary}}-500'}"  md-justified="column" class="primary line">
    <span>Primary - {{primary}}</span>
    <div md-justified >
      <span>500</span>
      <span>{{getColor(primary + '-500')}}</span>
    </div>
  </div>
  <div md-colors="{background: '{{primary}}-700'}" md-justified class="line" >
    <span>700</span>
    <span>{{getColor(primary + '-700')}}</span>
  </div>
  <div md-colors="{background: '{{primary}}-800'}" md-justified class="line" >
    <span>800</span>
    <span>{{getColor(primary + '-800')}}</span>
  </div>
  <div md-colors="{background: '{{accent}}-A200'}" md-justified="column" class="accent line">
    <span>Accent - {{accent}}</span>
    <div md-justified>
      <span>A200</span>
      <span>{{getColor(accent + '-A200')}}</span>
    </div>
  </div>
</div>
</script></div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

script.js

angular
  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('ThemeDemoCtrl', function ($scope, $mdColorPalette) {
    $scope.colors = Object.keys($mdColorPalette); 

    $scope.mdURL = 'https://www.google.com/design/spec/style/color.html#color-color-palette';
    $scope.primary = 'purple';
    $scope.accent = 'green';

    $scope.isPrimary = true;

    $scope.selectTheme = function (color) {
      if ($scope.isPrimary) {
        $scope.primary = color;

        $scope.isPrimary = false;
      }
      else {
        $scope.accent = color;

        $scope.isPrimary = true;
      }
    };
  })
  .directive('themePreview', function () {
    return {
      restrict: 'E',
      templateUrl: 'themePreview.tmpl.html',
      scope: {
        primary: '=',
        accent: '='
      },
      controller: function ($scope, $mdColors, $mdColorUtil) {
        $scope.getColor = function (color) {
          return $mdColorUtil.rgbaToHex($mdColors.getThemeColor(color))
        };
      }
    }
  })
  .directive('mdJustified', function() {
    return {
      restrict : 'A',
      compile : function(element, attrs)  {
        var layoutDirection = 'layout-'+ (attrs.mdJustified || "row");

        element.removeAttr('md-justified');
        element.addClass(layoutDirection);
        element.addClass("layout-align-space-between-stretch");

        return angular.noop;
      }
    };
  });


/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>

style.css

.colorsdemoThemePicker .section {
  font-size: 12px;
  padding: 16px;
  font-weight: bold; }

.colorsdemoThemePicker .line {
  padding: 16px; }

.colorsdemoThemePicker .primary, .colorsdemoThemePicker .accent {
  margin: 4px 0;
  height: 120px; }

.colorsdemoThemePicker [md-colors] {
  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1); }

.colorsdemoThemePicker p.footnote {
  font-size: 0.85em;
  margin: 30px;
  padding: 5px;
  background-color: rgba(205, 205, 205, 0.45); }

.colorsdemoThemePicker .componentTag {
  font-weight: bolder;
  font-size: 1.2em;
  padding-left: 10px; }


/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/

styles

<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />

Theme Picker.markdown

Theme Picker

A Pen by 杨俊 on CodePen.

License.