D3 Examples - Angular Material Themes

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1"/>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.6/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<body layout="column" ng-controller="AppController as vm" style="max-width: 960px; padding: 8px;">
<md-content>
    <md-card ng-repeat="(k, v) in vm.themes" class="md-whiteframe-12dp">
        <md-card-title>
            <md-card-title-text>
                <span class="md-display-1" style="margin-right: 24px;">{{k}}</span>
            </md-card-title-text>
            <md-card-title-media>
                <div class="md-whiteframe-2dp" style="display: inline-block;">
                <span ng-repeat="(k, v) in v"
                      style="min-width: 48px; min-height: 48px; display: inline-block; text-align: center; line-height: 48px"
                      ng-style="{'background-color': 'rgba('+v.value[0]+','+v.value[1]+','+v.value[2]+','+(v.value[3] || 1)+')', color: 'rgba('+v.contrast[0]+','+v.contrast[1]+','+v.contrast[2]+','+(v.contrast[3] || 1)+')'}">{{k}}</span>
                </div>
            </md-card-title-media>
        </md-card-title>
        <md-divider></md-divider>
        <md-card-content>
            <div md-theme="{{k}}">
                <div layout="row" layout-align="space-between center">
                    <div>
                        <md-toolbar>
                            <div class="md-toolbar-tools">primary</div>
                        </md-toolbar>
                        <md-toolbar class="md-hue-1">
                            <div class="md-toolbar-tools">hue 1</div>
                        </md-toolbar>
                        <md-toolbar class="md-hue-2">
                            <div class="md-toolbar-tools">hue 2</div>
                        </md-toolbar>
                        <md-toolbar class="md-hue-3">
                            <div class="md-toolbar-tools">hue 3</div>
                        </md-toolbar>
                    </div>
                    <div style="min-height: 256px;" layout="column" layout-align="space-between start">
                        <md-button class="md-raised md-primary">primary</md-button>
                        <md-button class="md-raised md-primary md-hue-1">hue 1</md-button>
                        <md-button class="md-raised md-primary md-hue-2">hue 2</md-button>
                        <md-button class="md-raised md-primary md-hue-3">hue 3</md-button>
                    </div>
                    <div style="min-height: 256px;" layout="column" layout-align="space-between start">
                        <md-switch class="md-primary" ng-model="vm.switch" style="margin: 0 0 8px 0">primary</md-switch>
                        <md-switch class="md-primary md-hue-1" ng-model="vm.switch" style="margin: 0 0 8px 0">hue 1
                        </md-switch>
                        <md-switch class="md-primary md-hue-2" ng-model="vm.switch" style="margin: 0 0 8px 0">hue 2
                        </md-switch>
                        <md-switch class="md-primary md-hue-3" ng-model="vm.switch" style="margin: 0 0 8px 0">hue 3
                        </md-switch>
                    </div>
                    <div style="min-height: 256px;" layout="column" layout-align="space-between start">
                        <md-checkbox class="md-primary" ng-model="vm.switch">primary</md-checkbox>
                        <md-checkbox class="md-primary md-hue-1" ng-model="vm.switch">hue 1</md-checkbox>
                        <md-checkbox class="md-primary md-hue-2" ng-model="vm.switch">hue 2</md-checkbox>
                        <md-checkbox class="md-primary md-hue-3" ng-model="vm.switch">hue 3</md-checkbox>
                    </div>
                    <div style="min-height: 256px;" layout="column" layout-align="space-between start">
                        <md-radio-group ng-model="vm.switch">
                            <md-radio-button class="md-primary" ng-value="true">primary</md-radio-button>
                        </md-radio-group>
                        <md-radio-group ng-model="vm.switch">
                            <md-radio-button class="md-primary md-hue-1" ng-value="true">hue 1</md-radio-button>
                        </md-radio-group>
                        <md-radio-group ng-model="vm.switch">
                            <md-radio-button class="md-primary md-hue-2" ng-value="true">hue 2</md-radio-button>
                        </md-radio-group>
                        <md-radio-group ng-model="vm.switch">
                            <md-radio-button class="md-primary md-hue-3" ng-value="true">hue 3</md-radio-button>
                        </md-radio-group>
                    </div>
                    <div style="min-height: 256px;" layout="column" layout-align="space-between center">
                        <md-progress-circular class="md-primary" md-mode="determinate"
                                              value="100"></md-progress-circular>
                        <md-progress-circular class="md-primary md-hue-1" md-mode="determinate"
                                              value="100"></md-progress-circular>
                        <md-progress-circular class="md-primary md-hue-2" md-mode="determinate"
                                              value="100"></md-progress-circular>
                        <md-progress-circular class="md-primary md-hue-3" md-mode="determinate"
                                              value="100"></md-progress-circular>
                    </div>
                </div>
            </div>
        </md-card-content>
    </md-card>
</md-content>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.6/angular-material.min.js"></script>
<script>
    angular.module('app', ['ngMaterial'])
        .config(function ($mdThemingProvider, $mdColorPalette) {
            $mdThemingProvider.alwaysWatchTheme(true);
            var keys = Object.keys($mdColorPalette);
            angular.forEach($mdColorPalette, function (v, k) {
                $mdThemingProvider.theme(k).primaryPalette(k).accentPalette(keys[(keys.indexOf(k) + 1) % keys.length]);
            });
        })
        .controller('AppController', function ($window, $scope, $mdColorPalette) {
            var vm = this;
            vm.themes = $mdColorPalette;
            vm.switch = true;
​
            console.log($mdColorPalette);
​
            if ($window.frameElement) {
                $window.frameElement.style.height = ((369 + 8 * 2) * Object.keys($mdColorPalette).length + 8 * 2) + 'px';
            }
        });
</script>
</body>
</html>
​
    