fix(dialog): apply foreground color and automatically detect theme

* Apply the missing foreground color on the md-dialog element
* Automatically detect the theme from the `targetEvent` property.
  - Developers are still able to overwrite the theme (as before)
  - Theme will fallback to the default theme (as before)
  - If `targetEvent` is specified, it will use the `mdTheme` controller to lookup for a changed theme

Fixes #8719.

Closes #8723

Author: devversion

src/components/dialog/dialog-theme.scss

@@ -2,7 +2,10 @@ $dialog-border-radius: 4px !default;
 
 md-dialog.md-THEME_NAME-theme {
   border-radius: $dialog-border-radius;
+
   background-color: '{{background-hue-1}}';
+  color: '{{foreground-1}}';
+
 
   &.md-content-overflow {
     .md-actions, md-dialog-actions {

src/components/dialog/dialog.js

@@ -551,7 +551,7 @@ function MdDialogProvider($$interimElementProvider) {
     });
 
   /* @ngInject */
-  function advancedDialogOptions($mdDialog, $mdTheming, $mdConstant) {
+  function advancedDialogOptions($mdDialog, $mdConstant) {
     return {
       template: [
         '<md-dialog md-theme="{{ dialog.theme }}" aria-label="{{ dialog.ariaLabel }}" ng-class="dialog.css">',
@@ -599,15 +599,17 @@ function MdDialogProvider($$interimElementProvider) {
       },
       controllerAs: 'dialog',
       bindToController: true,
-      theme: $mdTheming.defaultTheme()
     };
   }
 
   /* @ngInject */
-  function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement, $log, $injector) {
+  function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement,
+                                $log, $injector, $mdTheming) {
+
     return {
       hasBackdrop: true,
       isolateScope: true,
+      onCompiling: beforeCompile,
       onShow: onShow,
       onShowing: beforeShow,
       onRemove: onRemove,
@@ -641,7 +643,15 @@ function MdDialogProvider($$interimElementProvider) {
       }
     };
 
+    function beforeCompile(options) {
+      // Automatically apply the theme, if the user didn't specify a theme explicitly.
+      // Those option changes need to be done, before the compilation has started, because otherwise
+      // the option changes will be not available in the $mdCompilers locales.
+      detectTheming(options);
+    }
+
     function beforeShow(scope, element, options, controller) {
+
       if (controller) {
         controller.mdHtmlContent = controller.htmlContent || options.htmlContent || '';
         controller.mdTextContent = controller.textContent || options.textContent ||
@@ -797,6 +807,22 @@ function MdDialogProvider($$interimElementProvider) {
       }
     }
 
+    function detectTheming(options) {
+      // Only detect the theming, if the developer didn't specify the theme specifically.
+      if (options.theme) return;
+
+      options.theme = $mdTheming.defaultTheme();
+
+      if (options.targetEvent && options.targetEvent.target) {
+        var targetEl = angular.element(options.targetEvent.target);
+
+        // Once the user specifies a targetEvent, we will automatically try to find the correct
+        // nested theme.
+        options.theme = (targetEl.controller('mdTheme') || {}).$mdTheme || options.theme;
+      }
+
+    }
+
     /**
      * Capture originator/trigger/from/to element information (if available)
      * and the parent container for the dialog; defaults to the $rootElement
@@ -817,6 +843,7 @@ function MdDialogProvider($$interimElementProvider) {
             options.origin   = getBoundingClientRect(options.targetEvent.target, options.origin);
           }
 
+
           /**
            * Identify the bounding RECT for the target element
            *

src/components/dialog/dialog.spec.js

@@ -123,6 +123,49 @@ describe('$mdDialog', function() {
       expect(resolved).toBe(true);
     }));
 
+    it('should normally use the default theme', inject(function($animate, $rootScope, $mdDialog, $compile) {
+      var dialogParent = angular.element('<div>');
+
+      $mdDialog.show(
+        $mdDialog
+          .alert()
+          .parent(dialogParent)
+          .title("Title")
+          .textContent("Themed Dialog")
+          .ok('Close')
+      );
+
+      $rootScope.$apply();
+      runAnimation();
+
+      var mdContainer = angular.element(dialogParent[0].querySelector('.md-dialog-container'));
+      var mdDialog = mdContainer.find('md-dialog');
+
+      expect(mdDialog.attr('md-theme')).toBe('default');
+    }));
+
+    it('should apply the specified theme', inject(function($animate, $rootScope, $mdDialog, $compile) {
+      var dialogParent = angular.element('<div>');
+
+      $mdDialog.show(
+        $mdDialog
+          .alert()
+          .parent(dialogParent)
+          .title("Title")
+          .theme('myTheme')
+          .textContent("Themed Dialog")
+          .ok('Close')
+      );
+
+      $rootScope.$apply();
+      runAnimation();
+
+      var mdContainer = angular.element(dialogParent[0].querySelector('.md-dialog-container'));
+      var mdDialog = mdContainer.find('md-dialog');
+
+      expect(mdDialog.attr('md-theme')).toBe('myTheme');
+    }));
+
     it('should focus `md-dialog-content` on open', inject(function($mdDialog, $rootScope, $document) {
       jasmine.mockElementFocus(this);
 

src/core/services/interimElement/interimElement.js

@@ -426,7 +426,11 @@ function InterimElementProvider() {
          * Use optional autoHided and transition-in effects
          */
         function createAndTransitionIn() {
-          return $q(function(resolve, reject){
+          return $q(function(resolve, reject) {
+
+            // Trigger onCompiling callback before the compilation starts.
+            // This is useful, when modifying options, which can be influenced by developers.
+            options.onCompiling && options.onCompiling(options);
 
             compileElement(options)
               .then(function( compiledData ) {

src/core/services/interimElement/interimElement.spec.js

@@ -387,6 +387,25 @@ describe('$$interimElement service', function() {
         expect(autoClosed).toBe(true);
       }));
 
+      it('calls onCompiling before onShowing', inject(function() {
+        var onCompilingCalled = false;
+
+        Service.show({
+          template: '<div>My Element</div>',
+          onCompiling: beforeCompile,
+          onShowing: beforeShow
+        });
+
+        function beforeCompile() {
+          onCompilingCalled = true;
+        }
+
+        function beforeShow() {
+          expect(onCompilingCalled).toBe(true);
+        }
+
+      }));
+
       it('calls onShowing before onShow', inject(function() {
         var onShowingCalled = false;