更改角度材料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).

我从此官方文档中获得了一些想法

I got some idea from this official doc.

我在node_modules > @angular2-material > core > style中找到了_default-theme.scss，并在下一行中用紫色代替了蓝绿色.

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.json中. angular-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);
  }

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

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

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