角2应用程序的主题

Question

我想提供使用角材2的主题功能。任何人都可以提供一个示例如何做到这一点？我尝试使用材质2主题，但没有奏效。

Answer 1

指南角CLI：

选择主题，你想使用：靛蓝粉，deeppurple琥珀色，粉红色bluegrey，紫绿色。

styles.css的

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.c‌​ss'; 

styles.scss

@import '~@angular/material/core/theming/prebuilt/indigo-pink'; 

创建自己的主题https://youtu.be/0q9FOeEELPY?t=17m6s

这里https://github.com/angular/material2/blob/master/guides/theming.md#defining-a-custom-theme

Answer 2

您可能需要箱子自定义主题theme.scss：

@import '~@angular/material/core/theming/all-theme'; 

@include md-core(); 

$primary: md-palette($md-indigo); 
$accent: md-palette($md-pink, A200, A100, A400); 
$warn: md-palette($md-red); 

$app-theme: md-light-theme($primary, $accent, $warn); 

@include angular-material-theme($app-theme); 

把它放在你assets文件夹

然后在styles.scss刚刚导入：

@import '/assets/theme'; 

你也可以选择任何现有主题如果你只是通过参考来寻找node_modules\@angular\material\core\theming\prebuilt\例如：

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber'; 

详情请参阅docs和aterial2-app。

Answer 3

PrimeNG做到了。你可以检查他们的回购。

https://github.com/primefaces/primeng

这是活的网站

http://primefaces.org/primeng

Answer 4

这里的步骤：

：

https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-Material

但是你应该解决主题化的问题

看起来他们已经改变了Github构建的Material。在材料2

@import '~@angular/material/_theming.scss';