在Angular Material 2中更改主颜色

Question

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

我从官方文档这里获取了一些想法。

我在node_modules>@angular2-material>core>style中找到了_default-theme.scss，并将以下行中的teal颜色替换为紫色。

$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);

但是网页还是显示青蓝色而不是粉红色。我错过了什么？我该如何更改主色调？

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

- duke636

---

你不能这样做。那只是源代码。但实际使用的材料组件已经内置在带有内嵌_css_样式的js中。目前还不支持通过sass更改变量。你可以跟进这个问题（我确信很多人都在期待解决方案）。 - Paul Samsotha

Answer 1

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

您需要创建一个 scss 文件 "exampleTheme.scss" 并将其添加到您的 angular-cli.json angular-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材料主题指南

- Daniel Hoppe Alvarez

---

Daniel，感谢你的深入解释。你是将$theme导入style.css中还是应用程序只是在angular-cli.json中看到了你的引用？ - LargeDachshund

以上答案是Angular CLI最正确的方法。有关最新文档，请参见https://github.com/angular/material2/blob/master/guides/theming.md；请注意，变量前缀已更改。@LargeDachshund如果您正在使用Angular CLI，则在转译时它将自动注入到DOM中。 - Ryan Skoblenick

正确的解决方案，我想补充一下，对于Angular 4和Angular Material 2.0，有一个更新在https://material.angular.io/guide/theming，过程是相同的，但代码稍微改变了一下。 - yaircarreno

我已经相应地更新了帖子，你能看一下吗？我有没有忘记什么？ - Daniel Hoppe Alvarez

能否更改自定义代码，如 #CE2029？ - Jignesh Panchal

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文件中，因此它们可以在任何材料覆盖文件中使用。

希望这可以帮助到您。

- markstewie

---

这看起来很有前途。当然，它并不理想，因为 CSS 会因冗余样式而变得臃肿，但希望很快就会有一种简单高效的方法来修改 ng2-material 样式。 - brando

绝对不是理想的！但至少，如果/当他们引入样式时，这些样式可以轻松删除（因为它们与应用程序的其余样式分开保留），并且适当的主题将能够轻松地添加到他们引入的任何系统中。在那之前...这是我能想到的最好的方案。 - markstewie