更新

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 。）下一步：在＆＃34;样式＆＃34;中添加新条目angular-cli.json中的列表指向主题文件（例如，forest-theme.scss）。

<强>角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给出的答案是正确的，但已经过时了。

这些是以下新链接：

步骤与@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_modules \ @angular \ material \ core \ theming_palette.scss）

<强>更新

在最新版本的角度材质2（Beta 3）中，某些路径已更改，see here.

突破性变化是：

导入调色板或创建自己主题的新途径。 @import＆＃39;〜@ angular / material / core / theming / all-theme＆＃39;; 中 src / theme.scss 的路径发生变化到 @import＆＃39;〜@ angular / material / theming＆＃39;; 如果您只是导入预先构建的主题，也会发生同样的情况，琥珀主题的新路径是 @import＆＃39; ~@angular/material/prebuilt-themes/deeppurple-amber.css' ;;
由于Material 2 Beta 3依赖于Angular 4（Angular最新版本），我们需要在主模块中导入 BrowserAnimationsModule 或 NoopAnimationsModule 中的动画模块我引述：

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

更改内置颜色

2 个答案:

更新