在 Angular Material 2 中改变原色 [英] Changing Primary Color in Angular Material 2

问题描述

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

I am trying to change the default primary color in Angular Material 2 (alpha 6).

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

I got some idea from this official doc.

我从 node_modules > 找到了 _default-theme.scss@angular2-material >核心 >style 并在下一行中用紫色替换了蓝绿色.

I located _default-theme.scss from node_modules > @angular2-material > core > style and replaced the color teal by purple in the following line.

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

但页面中仍显示青色，而粉红色从未出现.我错过了什么?如何更改原色?

But the color teal is still shown in the page and pink never appears. What am I missing? How can I change the primary color?

(我使用 Angular Material 2 alpha 6 和 Angular 2 RC4)

(I am using Angular Material 2 alpha 6 with Angular 2 RC4)

推荐答案

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

您必须创建一个 scss 文件exampleTheme.scss"；，你将它添加到你的 angular-cli.jsonangular-cli.json:

You will have to create a scss file "exampleTheme.scss" , you add it to your angular-cli.json angular-cli.json:

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

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

In your customTheme.scss you can change your colors in use of the following code:

@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);`

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

Multiple Themes If you want to have an additional theme please read the guide linked in the end. But here a small overview you just have to replicate the theming process with new variables and colors

  $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 主题指南

for more detailed information you should read the angular material theme guide

这篇关于在 Angular Material 2 中改变原色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！