Angular 改变内置颜色

我只是想问一下如何在Angular 2材质中更改这些内置颜色

其在ng2材料文件中规定：

颜色：“主”|“重音”|“警告”

如何更改这些调色板中的颜色？或者甚至如何改变文本的蓝色

我试过了，但没用

md-input: {
  color: black;
  border-color: black
}

我在页面上找到了这个

因此，假设您使用的是

Angular CLI

-选择您想要使用的颜色及其阴影，例如棕色=$md棕色，然后选择800之类的阴影

1）首先创建一个

/src/forest-theme.scss

文件（任意名称）

3）那么在您的组件中，您应该能够执行类似的操作

import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <md-toolbar color="primary">
      <span>Forest Application Title</span>
    </md-toolbar>
    <br/>
    <div>
      <h2>Hello {{name}}</h2>
      <button md-raised-button color="primary">Forest PRIMARY</button>
      <button md-raised-button color="accent">Forest ACCENT</button>
      <button md-raised-button color="warn">Forest WARN</button>
      <br>
      <br>
      <md-input color="primary" placeholder="Primary Search"></md-input>
    </div>
  `,
})
export class App {
  name:string;

  constructor() {
    this.name = 'Angular2 Material'
  }

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
森林申请名称


你好{{name}
森林初级
森林口音
森林警告




`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name='Angular2材质'
}
}

这样就可以了，本页中的任何问题都可以回答

更新

---

有自己的网站，有大量的

由@Logan H给出的答案是正确的，但已经过时了

以下是新的链接：

步骤与@Logan H在回答中所说的相同：

在angular 2项目的src/文件夹下创建一个文件（theme.scss）

在angular-cli.json或angular-cli.json中指定的样式数组中添加文件名，具体取决于您的ng项目版本：

.angular cli.json

"styles": [
        "styles.less",
        "theme.default.scss"
]

src/theme.scss

//CHOOSE ONE, depending on your version, check UPDATE at the end
@import '~@angular/material/core/theming/all-theme';    
@import '~@angular/material/theming';

// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here 
// so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes 
// available in palette.scss
// (imported above). For each palette, you can optionally specify a default, 
// lighter, and darker
// hue.
$app-default: mat-palette($mat-indigo);
$app-default-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$app-default-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$app-default-theme: mat-light-theme($app-default, $app-default-accent, $app-
default-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each 
// component
// that you are using.
@include angular-material-theme($app-default-theme);

在注释中，说明了在何处可以找到一组颜色和可选择的选项。pallette.scss（\node\u modules\@angular\material\core\theming\u palete.scss）

更新

在Angle material 2（Beta 3）的最新版本中，某些路径已更改

突破性的变化是：

导入Pallete或创建自己主题的新路径。src/theme.scss中的路径从@import'~@angular/material/core/theming/all-theme'更改而来到@import'~@angular/material/theming'如果您只是导入一个预构建的主题，同样的情况也会发生，琥珀主题的新路径是@import'~@angular/material/prebuilded themes/deeppurple amber.css'

由于Material 2 Beta 3依赖于Angular 4（Angular的最新版本），我们需要在主模块中导入来自BrowserAnimationsModule或NoopAnimationsModule的动画模块，我引用：

现在动画已经被重构成一个单独的包， @angular/material的用户需要显式导入 从中浏览animationsmodule（或NoopAnimationsModule） @角度/软件包浏览器/动画以及安装 @角度/动画

"styles": [
        "styles.less",
        "theme.default.scss"
]

//CHOOSE ONE, depending on your version, check UPDATE at the end
@import '~@angular/material/core/theming/all-theme';    
@import '~@angular/material/theming';

// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here 
// so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes 
// available in palette.scss
// (imported above). For each palette, you can optionally specify a default, 
// lighter, and darker
// hue.
$app-default: mat-palette($mat-indigo);
$app-default-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$app-default-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$app-default-theme: mat-light-theme($app-default, $app-default-accent, $app-
default-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each 
// component
// that you are using.
@include angular-material-theme($app-default-theme);