$mdThemingProvider - registering a theme on the fly

[rgolea]

Hi there!
First of all, I love Angular Material. I think you guys are doing an excellent job. Keep it up.

Secondly, and the reason I'm starting this issue is because I want my users to be able to register a new theme by adding 3 colour palletes together. I would like to search that in the database... so I will have active just one theme but I would need it to work with an ajax function...
The question is... is there a way to do that? Will it? Could you add a resolve method just like the routes?

If you want to see what I would be using it for... just check this out... rgolea/angular-deployd-admin@3dd2a6f

I'm making an angular-material dashboard (free and open source for anyone who may need it). But in order to take full advantage of the angular-material capabilities I would need to do that option.

Thank you very much.

[ThomasBurleson]

@rgolea - I recommend add a snapshot of the [expected] UX to your the Angular-DepolyD-Admin README.

Meanwhile, let me discuss this with the team.

[rgolea]

Here is a snapshot... My users will change the different palletes and then set that setting as active. That will be the colour the app will have for all the users. Imagine the case scenarios where your users want to change colours in christmas, on birthdays or who knows... and you want them to get really creative and to choose the different palletes to make the theme they want. I don't think for this case scenario watching the theme would be a good idea but if you can adapt it... it would be way better.

Sorry you can't see the colours but I was using my mongodb with a more recent version of the project.

Thank you for answering.

[websirnik]

I'm looking into similar functionality or best practice to achieve that. For us it's user's corporate colors that needs to be changed on a fly.

[rgolea]

The thing is that I was trying to change the theme in the .run() method and use $mdThemingProvider like a service. I found out later that you can't because you can't inject a provider in the .run() function. :(

[ThomasBurleson]

So the feature request is to be use post-initialization processes [such as .run() or $timeout callbacks] to be able to call an API similar to $mdTheming.theme('default').primaryPalette('pink')

[rgolea]

Yes. I'm not sur what you mean with $timeout callbacks. But we need it to be on run because on .config() you can't use $http nor a factory. We need to do something like this:

$http.get([url_of_the_setting]).success(function(data){
     $mdTheming.theme([custom_name]).primaryPalette(data.primaryPalette); //with secondaryPalette, warnPalette and backgroundPalette too.
})

So basicaly, use it on .run() or to have a resolve method like the $routeProvider or $stateProvider. It should look something like this:

$mdThemingProvider.theme([custom_name]).resolve({
   primaryPalette: function($http, $q){
          var deffer = $q.defer();

         $http.get([url_of_the_setting]).success(function(data){
                deffer.resolve(data.primaryPalette);
         });
         return deffer.promise;
  }
});

Even if this scenario is way larger, we could use that too. Whatever you guys think it's easier for you to get it working.

[ThomasBurleson]

@rgolea - my point is that developers my need it not only at .run( ) times but also at other times during the app lifetime.

[rgolea]

Oh yeah! For sure! Thank you a lot @ThomasBurleson . Keep up the good work! I really think you guys are making this project be the new Twitter Bootstrap for angular. Thanks a lot!

[Frank3K]

+1

There was previously also some discussion around this functionality in another issue, see #1269 (comment).

[nolazybits]

+1
We need this functionality too...

[remcohaszing]

+1

[guilhermecvm]

+1

[meeDamian]

+1

[joaogarin]

Any ideas on how to get his working?

[Frank3K]

@joaogarin: there is currently a PR for this: #5074.

[joaogarin]

Cool;)

[garyforsterio]

+1

[CodyMorris]

+1

I too am looking to build palettes based on hex values returned from a backend service. I'm thinking the only other way to accomplish this would be to manually bootstrap your angular app, and fetch any required information before you config the app

[jazdw]

This should be re-opened, the 1.1.1 release notes say that this feature was merged but the commit was reverted before 1.1.1 was released.

[ThomasBurleson]

Fixed with SHA 7090a1f

[akash-int]

{"primary":{"name":"fuse-paleblue","hues":{"default":"700","hue-1":"500","hue-2":"600","hue-3":"400"}},"accent":{"name":"light-blue","hues":{"default":"600","hue-1":"400","hue-2":"700","hue-3":"A100"}},"warn":{"name":"red","hues":{"default":"500","hue-1":"300","hue-2":"800","hue-3":"A100"}},"background":{"name":"grey","hues":{"default":"A100","hue-1":"A100","hue-2":"100","hue-3":"300"}}

I'm getting data in this format from API calling. Can anyone please help me that how to apply this values to my theme & change theme color of my theme

[Arns]

@akash-int did you figure out how to do this with the raw color values? Anyone else know how this might be achieved? Struggling to find the answer.

[clshortfuse]

@Arns you should be able to use md-colors:

https://material.angularjs.org/1.1.4/api/directive/mdColors

[Arns]

@clshortfuse I might need some more details, I've read all docs and a lot of source code and it doesn't seem like any of this supports creating a theme on the fly - assigning one, yes - but not creating one with raw colors.

[clshortfuse]

@Arns You're talking about a custom palette. A palette is a list of colors. A theme is a list of palettes.

Creating a custom palette: https://github.com/angular/material/blob/master/src/core/services/theming/theming.spec.js#L26

Creating a custom theme: https://github.com/angular/material/blob/master/src/core/services/theming/theming.spec.js#L755

[Arns]

@clshortfuse Ahh, yes! That is an enlightening distinction. Thank you!

With that said, are we able to create custom palettes at runtime?

[Splaktar]

@Arns Not at this time. Please file a feature request against $mdTheming.