【发布时间】：2017-06-21 07:45:23
【问题描述】：
由于 Angular 使用视图封装，是否可以在 Angular 2 中支持多个主题？我的意思是用户应该能够单击一个按钮并更改整个应用程序的颜色主题。
PS：我正在使用带有 SASS 支持的 angular-cli 的 Angular 4。
目前我能够使用_variable.scss 文件生成静态主题，该文件导入到每个组件的基于 sass 的样式表中。
但是，我的要求是最终用户应该能够选择自己的颜色主题。
理想情况下，在非 Angular 网站中，我只需使用 javascript 将新编译的 css 文件添加到 <head> 标记。由于 shadow DOM 为每个组件生成单独的 style 并将它们添加到 <head> 中，我如何动态更改每个组件的样式？
【问题讨论】：
-
通常你只需要切换课程。除了使用
ngClass来实现模板中的有效更改之外，看不出这对 Angular 有何特殊意义。 -
@NeilLunn ：但这并不意味着我必须对每个新组件进行更改以支持 2 个类。这不会是一次一个地方的变化
-
真的取决于。 Angular 材料文档显示的内容大致相同。请注意，所有这些组件都有
ViewEncapsulation.None。 -
是的.. 我不知道多少 ViewEncapsulation.None 会影响性能。如果希望有一个中心位置，我可以配置颜色变量，而不是为每个组件烦恼:(
标签： css angular themes skin skinning