feat(themes): register theme on the fly

- By using `defineTheme` of `$mdTheming` you can specify the name of the theme and the palettes, combined with `md-deferred-theme` directive to avoid warnings on not defined themes

fixes #2965

Author: EladBezalel

src/core/services/theming/theming.js

@@ -8,6 +8,7 @@
  */
 angular.module('material.core.theming', ['material.core.theming.palette', 'material.core.meta'])
   .directive('mdTheme', ThemingDirective)
+  .directive('mdDeferredTheme', ThemingDirective)
   .directive('mdThemable', ThemableDirective)
   .directive('mdThemesDisabled', disableThemesDirective )
   .provider('$mdTheming', ThemingProvider)
@@ -546,12 +547,42 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
           applyTheme.inherit(el, el);
         };
 
-    applyTheme.THEMES = angular.extend({}, THEMES);
-    applyTheme.PALETTES = angular.extend({}, PALETTES);
+    Object.defineProperty(applyTheme, 'THEMES', {
+      get: function () {
+        return angular.extend({}, THEMES);
+      }
+    });
+    Object.defineProperty(applyTheme, 'PALETTES', {
+      get: function () {
+        return angular.extend({}, PALETTES);
+      }
+    });
     applyTheme.inherit = inheritTheme;
     applyTheme.registered = registered;
     applyTheme.defaultTheme = function() { return defaultTheme; };
     applyTheme.generateTheme = function(name) { generateTheme(THEMES[name], name, themeConfig.nonce); };
+    applyTheme.defineTheme = function (name, options) {
+      options = options || {};
+
+      var theme = registerTheme(name);
+
+      if (options.primary) {
+        theme.primaryPalette(options.primary);
+      }
+      if (options.accent) {
+        theme.accentPalette(options.accent);
+      }
+      if (options.warn) {
+        theme.warnPalette(options.warn);
+      }
+      if (options.background) {
+        theme.backgroundPalette(options.background);
+      }
+
+      this.generateTheme(name);
+
+      return theme;
+    };
     applyTheme.setBrowserColor = enableBrowserColor;
 
     return applyTheme;
@@ -593,7 +624,7 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
        */
       function updateThemeClass(theme) {
         if (!theme) return;
-        if (!registered(theme)) {
+        if (ctrl && !ctrl.$isDeferredTheme && !registered(theme)) {
           $log.warn('Attempted to use unregistered theme \'' + theme + '\'. ' +
                     'Register it with $mdThemingProvider.theme().');
         }
@@ -628,6 +659,7 @@ function ThemingDirective($mdTheming, $interpolate, $log) {
     priority: 100,
     link: {
       pre: function(scope, el, attrs) {
+        var isDeferred = attrs.hasOwnProperty('mdDeferredTheme');
         var registeredCallbacks = [];
         var ctrl = {
           registerChanges: function (cb, context) {
@@ -646,19 +678,21 @@ function ThemingDirective($mdTheming, $interpolate, $log) {
             };
           },
           $setTheme: function (theme) {
-            if (!$mdTheming.registered(theme)) {
+            if (!isDeferred && !$mdTheming.registered(theme)) {
               $log.warn('attempted to use unregistered theme \'' + theme + '\'');
             }
             ctrl.$mdTheme = theme;
+            ctrl.$isDeferredTheme = isDeferred;
 
             registeredCallbacks.forEach(function (cb) {
               cb();
             });
           }
         };
         el.data('$mdThemeController', ctrl);
-        ctrl.$setTheme($interpolate(attrs.mdTheme)(scope));
-        attrs.$observe('mdTheme', ctrl.$setTheme);
+        var directiveType = isDeferred ? 'mdDeferredTheme' : 'mdTheme';
+        ctrl.$setTheme($interpolate(attrs[directiveType])(scope));
+        attrs.$observe(directiveType, ctrl.$setTheme);
       }
     }
   };

src/core/services/theming/theming.spec.js

@@ -737,6 +737,17 @@ describe('$mdTheming service', function() {
     expect($mdTheming.defaultTheme()).toBe('default');
   }));
 
+  it('supports registering theme on the fly', inject(function ($mdTheming) {
+    expect($mdTheming.THEMES.hasOwnProperty('test')).toBeFalsy();
+
+    $mdTheming.defineTheme('test', {
+      primary: 'red',
+      warn: 'yellow'
+    });
+
+    expect($mdTheming.THEMES.hasOwnProperty('test')).toBeTruthy();
+  }));
+
   it('supports changing browser color on the fly', function() {
     var name = 'theme-color';
     var primaryPalette = $mdThemingProvider._THEMES.default.colors.primary.name;
@@ -787,6 +798,38 @@ describe('md-theme directive', function() {
   });
 });
 
+describe('md-deferred-theme directive', function() {
+  beforeEach(module('material.core'));
+
+  it('should observe and set mdTheme controller', inject(function($compile, $rootScope) {
+    $rootScope.themey = 'unregistered';
+    var el = $compile('<div md-deferred-theme="{{themey}}">')($rootScope);
+    $rootScope.$apply();
+    var ctrl = el.data('$mdThemeController');
+    expect(ctrl.$mdTheme).toBe('unregistered');
+    $rootScope.$apply('themey = "blue"');
+    expect(ctrl.$mdTheme).toBe('blue');
+  }));
+
+  it('does not warns when an unregistered theme is used', function() {
+    inject(function($log, $compile, $rootScope) {
+      spyOn($log, 'warn');
+      $compile('<div md-deferred-theme="unregistered"></div>')($rootScope);
+      $rootScope.$apply();
+      expect($log.warn).not.toHaveBeenCalled();
+    });
+  });
+
+  it('does not warn when a registered theme is used', function() {
+    inject(function($log, $compile, $rootScope) {
+      spyOn($log, 'warn');
+      $compile('<div md-deferred-theme="default"></div>')($rootScope);
+      $rootScope.$apply();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+});
+
 describe('md-themable directive', function() {
   var $mdThemingProvider;
   beforeEach(module('material.core', function(_$mdThemingProvider_) {