Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

$mdThemingProvider - registering a theme on the fly #2965

Closed
rgolea opened this issue May 24, 2015 · 34 comments · Fixed by #9413 or #9475
Closed

$mdThemingProvider - registering a theme on the fly #2965

rgolea opened this issue May 24, 2015 · 34 comments · Fixed by #9413 or #9475
Assignees
Labels
- Lots of Comments P4: minor Minor issues. May not be fixed without community contributions. resolution: fixed
Milestone

Comments

@rgolea
Copy link

rgolea commented May 24, 2015

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
Copy link
Contributor

@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.

@ThomasBurleson ThomasBurleson added this to the 0.10.0 milestone May 25, 2015
@ThomasBurleson ThomasBurleson self-assigned this May 25, 2015
@rgolea
Copy link
Author

rgolea commented May 25, 2015

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.

screen shot 2015-05-25 at 16 58 56

@websirnik
Copy link

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
Copy link
Author

rgolea commented May 25, 2015

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
Copy link
Contributor

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
Copy link
Author

rgolea commented May 25, 2015

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
Copy link
Contributor

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

@rgolea
Copy link
Author

rgolea commented May 25, 2015

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
Copy link
Contributor

Frank3K commented May 25, 2015

+1

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

@nolazybits
Copy link

+1
We need this functionality too...

@remcohaszing
Copy link
Contributor

+1

@robertmesserle robertmesserle modified the milestones: 0.11.0, 0.10.0 Jun 16, 2015
@guilhermecvm
Copy link

+1

@ThomasBurleson ThomasBurleson modified the milestones: 0.11.0, post-1.0 Jul 31, 2015
@meeDamian
Copy link

+1

@joaogarin
Copy link

Any ideas on how to get his working?

@Frank3K
Copy link
Contributor

Frank3K commented Oct 24, 2015

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

@joaogarin
Copy link

Cool;)

@ThomasBurleson ThomasBurleson modified the milestones: post-1.0 , Backlog Jan 5, 2016
@garyforsterio
Copy link

+1

@CodyMorris
Copy link

+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

EladBezalel added a commit that referenced this issue Sep 8, 2016
- Added `defineTheme` functionality to `$mdTheming` service
- Added support for promise and a function that returns a promise on `md-theme` directive to support async build of themes

fixes #2965
EladBezalel added a commit that referenced this issue Sep 21, 2016
- Added `defineTheme` functionality to `$mdTheming` service
- Added support for promise and a function that returns a promise on `md-theme` directive to support async build of themes

fixes #2965
@jazdw
Copy link

jazdw commented Sep 30, 2016

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.

@EladBezalel EladBezalel reopened this Oct 2, 2016
EladBezalel added a commit that referenced this issue Oct 2, 2016
- Added `defineTheme` functionality to `$mdTheming` service
- Added support for promise and a function that returns a promise on `md-theme` directive to support async build of themes

fixes #2965
EladBezalel added a commit that referenced this issue Oct 5, 2016
- Added `defineTheme` functionality to `$mdTheming` service
- Added support for promise and a function that returns a promise on `md-theme` directive to support async build of themes

fixes #2965
kara pushed a commit that referenced this issue Oct 14, 2016
- Added `defineTheme` functionality to `$mdTheming` service
- Added support for promise and a function that returns a promise on `md-theme` directive to support async build of themes

fixes #2965
@ThomasBurleson
Copy link
Contributor

Fixed with SHA 7090a1f

@akash-int
Copy link

akash-int commented Sep 19, 2017

{"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
Copy link

Arns commented Mar 29, 2018

@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
Copy link
Contributor

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

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

@Arns
Copy link

Arns commented Mar 30, 2018

@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
Copy link
Contributor

clshortfuse commented Mar 30, 2018

@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
Copy link

Arns commented Apr 2, 2018

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

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

@Splaktar
Copy link
Contributor

Splaktar commented Apr 5, 2018

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

Splaktar added a commit that referenced this issue Apr 5, 2018
the APIs were covered some in the guide, but not in the service docs
update existing docs for consistency

Relates to #2965. Relates to #9475. Relates to #9476.
Relates to #10458. Relates to #10458.
jelbourn pushed a commit that referenced this issue Apr 6, 2018
the APIs were covered some in the guide, but not in the service docs
update existing docs for consistency

Relates to #2965. Relates to #9475. Relates to #9476.
Relates to #10458. Relates to #10458.
chmelevskij pushed a commit to chmelevskij/material that referenced this issue Jun 19, 2018
the APIs were covered some in the guide, but not in the service docs
update existing docs for consistency

Relates to angular#2965. Relates to angular#9475. Relates to angular#9476.
Relates to angular#10458. Relates to angular#10458.
Splaktar added a commit that referenced this issue Jul 31, 2018
the APIs were covered some in the guide, but not in the service docs
update existing docs for consistency

Relates to #2965. Relates to #9475. Relates to #9476.
Relates to #10458. Relates to #10458.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
- Lots of Comments P4: minor Minor issues. May not be fixed without community contributions. resolution: fixed
Projects
None yet