Question

我正在尝试更改Angular Material 2（alpha 6）中的默认主色。

我从this官方文档中得到了一些想法。

我找到了来自_default-theme.scss的{{1}}，并在下一行中将颜色蓝绿色替换为紫色。

node_modules > @angular2-material > core > style

但是页面上仍然显示颜色蓝绿色，粉红色从未出现过。我错过了什么？如何更改原色？

（我使用Angular Material 2 alpha 6和Angular 2 RC4）

Answer 1

Angular 4+和Angular Material 2.0.0 beta 10，Angular CLI 1.3 +

你必须创建一个scss文件“exampleTheme.scss”，你将它添加到你的angular-cli.json中的角cli.json：

"styles": [ //if you are using --scss the file is called style.scss "styles.css", "customTheme.scss" ],

在 customTheme.scss 中，您可以使用以下代码更改颜色：

@import '~@angular/material/theming'; @include mat-core(); $primary: mat-palette($mat-blue,200); $accent: mat-palette($mat-orange,200); $theme: mat-light-theme($primary, $accent); @include angular-material-theme($theme);`

多个主题 如果您想要一个额外的主题，请阅读最后链接的指南。但是这里只是一个小概述，您只需要使用新变量和颜色复制主题过程

$dark-primary: mat-palette($mat-blue,800); $dark-accent: mat-palette($mat-orange,800); $dark-theme: mat-dark-theme($primary, $accent);

并添加

.material-dark-theme { @include angular-material-theme($dark-theme); }

有关详细信息，请阅读angular material theme guide

Answer 2

我今天刚刚克服了这个问题......

正如上面的评论所述，目前还不可能正式但你可以在sass文件中单独覆盖颜色。这有点工作，但确实很有效。

我的scss文件结构

/scss
--/angular-material
-- _button.scss
-- _checkbox.scss
-- _input.scss
--  //etc
-- angular-material.scss // I @import all angular-material files into this
 main.scss // angular-material is imported into my main scss file...

作为一个例子......我的angular-material / _input.scss看起来像这样：

:root md-input {

@extend %typo-base;
padding-top: 1px;

.md-input-placeholder {
  color: $light-grey-color;
}

.md-input-placeholder.md-focused {
  color: $primary-color;
}

.md-input-underline {
  border-color: $light-grey-color;
}

.md-input-underline .md-input-ripple {
  background-color: $primary-color;
}

//...etc
}

:root选择器穿过阴影dom以覆盖样式。颜色变量从我的主题导入到angular-material.scss文件中，因此可以在任何材质覆盖文件中使用它们。

希望这有帮助。

改变角材料的原色2

2 个答案: