mdcolors not working in mddialog for Angular Material

Question

I have an mddialog that tries to use md-colors to set a backGround color of a div in a dialog. However it is not respecting the current theme, instead defaulting to the blue theme.

md-colors="{backgroundColor: 'primary'}"

Is this a known issue? Is there a workaround?

Using version 1.1.1

Answer 1

This works - CodePen

Markup

<div ng-controller="TasksController as vm" class="md-padding" ng-cloak="" ng-app="app">
   <md-button class="md-primary md-raised" ng-click="vm.show($event)">
      Custom Dialog
    </md-button>

  <script type="text/ng-template" id="test.html">
    <md-dialog aria-label="Test" layout-margin layout="column" layout-align="center center">
        <div style="width:100px; height:100px;"  md-colors="::{background: 'altTheme-primary-700'}"></div>
    </md-dialog>
  </script>
</div>

JS

angular.module('app',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('altTheme')
    .primaryPalette('purple')

  $mdThemingProvider.setDefaultTheme('altTheme');
})

.controller('TasksController', function($scope, $mdDialog) {
  var vm = this;
  vm.show = function(ev) {
    $mdDialog.show({
      templateUrl: 'test.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true
    });
  };
});