更改 Angular 材质 2 中的原色

Question

我正在尝试更改 Angular Material 2 (alpha 6) 中的默认原色。

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

我从node_modules > @angular2-material > core > style 找到了_default-theme.scss，并在下一行中用紫色替换了青色。

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

但是页面中仍然显示蓝绿色，并且永远不会出现粉红色。我错过了什么？如何更改原色？

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

Answer 1

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

正如上面的评论所说，目前还不能正式实现，但您可以在 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 选择器穿透 shadow dom 以覆盖样式。颜色变量从我的主题导入到angular-material.scss 文件中，因此它们可以在任何材质覆盖文件中使用。

希望这会有所帮助。

Answer 2

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 material theme guide