19

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

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

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

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

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

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

4

2 回答 2

40

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);
  }

有关更多详细信息，您应该阅读角度材料主题指南

于 2016-11-19T11:58:38.037 回答
0

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

正如上面的评论所述，目前还不能正式发布，但您可以在 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文件中，因此它们可以在任何材质覆盖文件中使用。

希望这可以帮助。

于 2016-08-04T09:16:02.743 回答