Skip to content

Instantly share code, notes, and snippets.

@darosh

darosh/README.md

Last active March 12, 2016 06:31
Show Gist options
  • Save darosh/987a590bd4421b33fd8a to your computer and use it in GitHub Desktop.
Save darosh/987a590bd4421b33fd8a to your computer and use it in GitHub Desktop.
Download ZIP
Angular Material Themes
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment