Angular2: Update all color assignments in CSS dyna

问题:

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?

回答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.