更改内置颜色

Question

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

它在 ng2-material 文档中指定： color: "primary"|"accent"|"warn"

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

这个我试过了，还是不行。

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

Answer 1

我在Angular2 Material github 页面上找到了这个

Angular Material Home Page

所以假设你使用Angular-CLI

Color Pallette - 用于选择您要使用的颜色及其色调，例如 brown = $md-brown 然后选择像 800 这样的色调。

1。）首先创建一个./src/forest-theme.scss 文件（随便你想要什么名字）

@import '~@angular/material/core/theming/all-theme';

@include md-core();

$forest-app-primary: md-palette($md-brown, 800);       // Brown  <-- CUSTOM COLOR HERE!
$forest-app-accent:  md-palette($md-green, A400);      // Green  <-- CUSTOM COLOR HERE!

$forest-app-warn:    md-palette($md-deep-orange, 500); // Orange <-- CUSTOM COLOR HERE!

$forest-app-theme: md-light-theme($forest-app-primary, $forest-app-accent, $forest-app-warn);

@include angular-material-theme($forest-app-theme);

2。）下一步：在angular-cli.json 中的“样式”列表中添加一个新条目，指向主题文件（例如，forest-theme.scss）。

angular-cli.json

{
    "project": {
        "version": "blah",
        "name": "my_forest_app"
    },
    "apps": [ 
      {
        "styles": [
            "styles.css",
            "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 Material 有自己的网站，上面有很多Guides

Answer 2

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

这些是新的链接：

• Theming your angular 2 material project Github.

• Theming your angular 2 material project Official documentation website.

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

1. 在 Angular 2 项目的 src/ 文件夹下创建一个文件 (theme.scss)
2. 在 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);

在 cmets 中解释了在哪里可以找到一组颜色和可供选择的选项。 palette.scss (\node_modules\@angular\material\core\theming_palette.scss)

更新

在 Angular Material 2（Beta 3）的最后一个版本中，一些路径发生了变化，see here.

重大变化是：

1. 导入调色板或创建自己的主题的新路径。 src/theme.scss 中的路径从 @import '~@angular/material/core/theming/all-theme'; 更改为@import '~@angular/material/theming'; 如果你只是导入一个预建的主题也会发生同样的情况，琥珀主题的新路径是 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

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

现在动画已经被重构到一个单独的包中， @angular/material 的用户需要显式导入 BrowserAnimationsModule（或 NoopAnimationsModule）来自 @angular/package-browser/animations 以及安装 @角/动画。