Angular Material Dynamically define theme

Question

I am rewriting an AngularJS application where the theme of the application is provided by the server. Also the theme can be edited by the user within the application (via color pickers).

This was possible via the ng.material.IThemingProvider and the $mdTheming from Angularjs material. But In Angular those services do not exist. So that leaves me with the question, how can I dynamically create an Angular Material theme and use it?

The server response

I am getting the following data from the server:

"css": {
    "--nav-font-color-accent": "#fff",
    "--nav-font-color-active": "#fff",
    "--primary": "#4f2d7f",
    "--nav-background": "#fefffe",
    "--nav-font-color": "#47a742",
    "--warn": "#ff5722",
    "--accent": "#00a8b5",
    "--brand-color": "#47a742"
}

This data is then converted to an Angularjs-material theme via the ng.material.IThemingProvider:

 this.themeProvider.definePalette('primaryPalette', this.generatePalette(config['--primary']));
 this.themeProvider.theme('default')
          .primaryPalette('primaryPalette')

Is there a way I can reproduce this functionality in Angular Material 7.1.0?

I'm facing a similar problem, were you able to solve this? Is there any way a customer overwrites a default theme during runtime? — Alejandro González
– Alejandro González, Commented May 9, 2019 at 9:47
@AlejandroGonzález, The only solution I could find is implementing my own theme service. This was due to the fact that Angular Material only reads themes that were defined via scss. There is also no ETA on the feature to support dynamic theme loading. — Mr.wiseguy
– Mr.wiseguy, Commented May 9, 2019 at 9:56

G. Tranter · Accepted Answer · 2018-11-29 15:24:15Z

1

In Angular Material2 you can dynamically apply themes, but you cannot dynamically generate themes because theming is done using SASS which requires compilation in order to generate usable CSS.

answered Nov 29, 2018 at 15:24

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mr.wiseguy Over a year ago

So that would mean that it isn't possible to generate and apply themes on the fly?

G. Tranter Over a year ago

As I already stated, you can dynamically apply. You cannot dynamically generate. So if you want to dynamically apply theme changes, they would have to be pre-generated. The Angular Material demo site itself does this ('select a theme' icon on right side of top toolbar).

Mr.wiseguy Over a year ago

hmm thats a bummer. A lot of clients use this functionality in our current application (AngularJS Material). So that would mean we need to find an other way. Thanks for the answer!

Collectives™ on Stack Overflow

Angular Material Dynamically define theme

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related