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)
@@ -552,6 +553,28 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
     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 +616,7 @@ function ThemingProvider($mdColorPalette, $$mdMetaProvider) {
        */
       function updateThemeClass(theme) {
         if (!theme) return;
-        if (!registered(theme)) {
+        if (!ctrl.$isDeferredTheme && !registered(theme)) {
           $log.warn('Attempted to use unregistered theme \'' + theme + '\'. ' +
                     'Register it with $mdThemingProvider.theme().');
         }
@@ -628,6 +651,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 +670,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);
       }
     }
   };