改变角材料的原色2

Question

我正在尝试更改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)

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

有关更多详细信息,请阅读角度材料主题指南

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器穿透 Shadow dom 来覆盖样式。颜色变量从我的主主题导入到文件中angular-material.scss，以便它们可以在任何材质覆盖文件中使用。

希望这可以帮助。