Angular 2动态全局CSS

Question

I'm working on an app where each user can define custom colors for its dashboard. Like textColor, accentColor and backgroundColor;

The entire UI will use those colors.

I know how to set a css property dynamic but doesn't seem correct to do it every single element.

I was wondering if I can create a dynamic css and inject it into the app. (is it too much workaround?)

I managed to make it work by using a server-side generated theme.css (something like /users/1.css ). Can you smell it?

What's the proper way to do it?

Answer 1

We've developed an application that had to be white label, so we've created directives for the editable items and the directives listened to the service that handled the layout package from server, overwriting if needed the property. In your case you could choose to have only textColor, accentColor and backgroundColor directives instead of each layout component have your own layout directive.

I'm currently looking for a way to actually receive an entire scss from server that would overwrite the variables inside Sass, but I could not find any approach yet.

I would also share this article, that could be helpful: https://engineering.thetrainline.com/how-we-implemented-a-single-page-application-using-react-3f22e4d545c4