CODEWITHSUNDEEP
angularjsmaterial-designangular-material
wlingke
wlingke

Reputation: 4799

Modify $mdDialog backdrop using $mdThemingProvider

Is it possible to define the backdrop color/shade of $mdDialog using $mdThemingProvider?

PLEASE NOTE: I know you can do this with pure CSS. The question relates to $mdThemingProvider only.

Upvotes: 2

Views: 1127

Answers (1)

Mohamed El-Sayed
Mohamed El-Sayed

Reputation: 501

You can define a new palette extending grey palette specifying a value for 900 shade.

    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');
    });

example:

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>

Upvotes: 1

Related Questions