使用 $mdThemingProvider 修改 $mdDialog 背景答案

【问题标题】：Modify $mdDialog backdrop using $mdThemingProvider使用 $mdThemingProvider 修改 $mdDialog 背景
【发布时间】：2015-07-20 22:10:53
【问题描述】：

是否可以使用 $mdThemingProvider 定义 $mdDialog 的背景颜色/阴影？

请注意：我知道您可以使用纯 CSS 做到这一点。该问题仅与 $mdThemingProvider 有关。

【问题讨论】：

我挖掘了 Theming 文档，看起来 $mdThemingProvider 可用于更改整个托盘，而不是特定于组件的颜色。

标签： angularjs material-design angular-material

【解决方案1】：

您可以定义一个扩展grey 调色板的新调色板，指定900 阴影的值。

    angular.module('moduleName').config(function($mdThemingProvider) {
      var redTheme = $mdThemingProvider.theme('redTheme', 'default');
      var redPalette = $mdThemingProvider.extendPalette('grey', {
        '900': '#f00'
      });
      $mdThemingProvider.definePalette('redPalette', redPalette);
      redTheme.backgroundPalette('redPalette');
    });

示例：

angular.module('BackdropApp', ['ngAria', 'ngAnimate', 'ngMaterial'], function($mdThemingProvider) {
   		var redTheme = $mdThemingProvider.theme('redTheme', 'default');
  		var redPalette = $mdThemingProvider.extendPalette('grey', {
  			'900': '#f00'
  		});
  		$mdThemingProvider.definePalette('redPalette', redPalette);
  		redTheme.backgroundPalette('redPalette');
   	})

   	.run(function($rootScope, $mdDialog) {
   		$rootScope.showAlert = function() {
	   		$mdDialog.show($mdDialog.alert({
	   			content: 'A red backdrop',
	   			ok: 'OK'
	   		}));
   		};
   	});

<html>
<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css">
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script>
</head>
<body ng-app="BackdropApp" md-theme="redTheme">
   <md-toolbar> </md-toolbar>
  <md-button ng-click="showAlert()" class="md-raised md-primary">Show Alert</md-button>
</body>
</html>

【讨论】：