Components: Support dynamic theming
Bug, feature request, or proposal:
Feature request. In angular material 1 it is possible to generate/swap themes dynamically.
The design guide of angular material 2 only mentions static theming.
However, for multi-tenant systems, where each tenant has a custom theme, this dynamic theming is very useful.
What is the expected behavior?
Similar to angular material 1
What is the current behavior?
Only static theming is possible, where you have to generate your css files from sass in advance.
What is the use-case or motivation for changing an existing behavior?
Multi-tenant systems.
sebakerckhof
All 25 comments
This use case not quite common and should be supported.
@sebakerckhof I was also thinking about creating a node js webservice that compiles the sass files, so i would only have to pass some parameters, let it compile and then include the correct compiled css file for each tenant. Not sure if the theme would really have to be generated at runtime.
mbeckenbach
on 3 Nov 2016
Any updates on this? My team is also looking for a way to theme components for a multi-tenant application so this would be incredibly helpful.
james-knerr
on 11 Jan 2017
@james-knerr Have a look at the multple themes section in docs. With a simple host binding you can easyly add a theme based on the tenant
mbeckenbach
on 23 Jan 2017
@mbeckenbach
What do you mean with host binding?
The way I understand that section is that you would need to include all the CSS for all the tenants. This is exactly what we want to avoid.
And tenants can usually be dynamically added/changed. This is still a build step, so not something we can modify at runtime.
Maybe tenants can choose their theme colors which are then stored to the database. All of these use cases are neatly handled in angular material 1.
sebakerckhof
on 24 Jan 2017
Is there any update on this? The theming documentation is fairly vague and hasn't been updated in a couple of months. Specifically the @mixins talk. I'm unsure where to put what, and when I define multiple themes inside a file with classes I can't seem to dynamically switch them unless I add in some hacky ngIf statements into my component templates.
bederman
on 20 Feb 2017
Any update on this? [2]
IagoBarboza
on 7 Mar 2017
This is a "maybe someday" feature that we don't have any plans to work on in the near future.
jelbourn
on 9 Apr 2017
I see a possible solution for those who absolutely need to generate themes at runtime, for example to allow users to tweak the colors themselves.
As per the official documentation, it is possible to:
node-sass src/unicorn-app-theme.scss dist/unicorn-app-theme.css
and then include the output file in your index.html.
So it should also be possible to
- put together the theme.scss using the user's custom preferences,
- then use sass.js to compile it in the browser
- and finally just put the result into a
Most helpful comment
@mbeckenbach
What do you mean with host binding?
The way I understand that section is that you would need to include all the CSS for all the tenants. This is exactly what we want to avoid.
And tenants can usually be dynamically added/changed. This is still a build step, so not something we can modify at runtime.
Maybe tenants can choose their theme colors which are then stored to the database. All of these use cases are neatly handled in angular material 1.