CODEWITHSUNDEEP
angularjsangularangular-materialthemes
Mr.wiseguy
Mr.wiseguy

Reputation: 4252

Angular Material Dynamically define theme

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?

Upvotes: 0

Views: 360

Answers (1)

G. Tranter
G. Tranter

Reputation: 17958

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.

Upvotes: 1

Related Questions