更改内置颜色

Question

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

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

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

我试过这个并没有用.

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

Answer 1

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

角度材料主页

所以假设你正在使用 Angular-CLI

彩色调色板 - 用于选择您想要使用的颜色及其色调,例如棕色= $ 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).

角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拥有自己的网站,有很多指南

Answer 2

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

这些是以下新链接:

• 主题你的角度2材料项目 Github.

• 主题你的角度2材料项目官方文档网站.

步骤与@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);

在评论中解释了在哪里可以找到要选择的颜色和选项集.pallette.scss(\node_modules\@angular\material\core\theming_palette.scss)

UPDATE

在角度材料2(Beta 3)的最后一个版本中,一些路径已经改变,请参见此处.

突破性的变化是:

1. 导入托盘或创建自己主题的新途径.src/theme.scss中的路径从@ import'〜@ angular/material/core/theming/all-theme'改变; 到@import '〜@角/材料/主题化'; 如果您只是导入预先构建的主题,则会发生同样的情况,琥珀色主题的新路径是@import'~@angular/material/prebuilt-themes/deeppurple-amber.css';

2. 由于Material 2 Beta 3依赖于Angular 4(Angular最新版本),我们需要在我们的主模块中导入BrowserAnimationsModule或NoopAnimationsModule中的动画模块,我引用:

现在动画已被重构为一个单独的包,@ angular/material的用户需要从@ angular/package-browser/animations显式导入BrowserAnimationsModule(或NoopAnimationsModule)以及安装@ angular/animations.