Angular2: Update all color assignments in CSS dynamically

Question

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?

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 stackoverflow.com/a/13735267/4084574 — mhatch
– mhatch, Commented Jun 22, 2017 at 19:09
similar to mhatchs link but with some angular code stackoverflow.com/questions/39643042/… — LLai
– LLai, Commented Jun 22, 2017 at 19:10

Mauricio De La Quintana · Accepted Answer · 2017-06-22 19:10:16Z

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.

answered Jun 22, 2017 at 19:10

Mauricio De La Quintana

2,44220 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Angular2: Update all color assignments in CSS dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related