0

I have an angular 2 application in which I'd like to implement the ability for a user to choose their color theme from a list of predetermined color palettes. When they select a theme, ALL relevant instances of color, background-color, etc will be changed to the corresponding new color from the theme palette. Is there any way to implement this from an Angular controller?

I know that you can conditionally add classes to specific elements using [class.className] or [ngClass] but obviously it is not practical to have to change the styles individually on every single attribute in a large application.

Specific use case: (click) listener attached to an "Update Theme" button is handled by a controller function used to change the css color values in .css file.

Has anyone implemented dynamic/user controlled themes/colors in Angular2? Any suggestions for how to approach this?

natmegs
  • 121
  • 2
  • 16
  • What about loading different versions of a stylesheet based on the users selection. The versions would use the same class names but different values/styles. The onclick handler can do something like this https://stackoverflow.com/a/13735267/4084574 – mhatch Jun 22 '17 at 19:09
  • similar to mhatchs link but with some angular code https://stackoverflow.com/questions/39643042/load-css-file-dynamically-for-theming – LLai Jun 22 '17 at 19:10

1 Answers1

1

bro the angular material team has worked in a very cool feature.

https://github.com/angular/material2/blob/master/guides/theming.md

if you want to see a working example https://material.angular.io/ has a theme picker in the navbar.

Mauricio De La Quintana
  • 2,362
  • 16
  • 14