更改内置颜色 [英] Change built-in colors

问题描述

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

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

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

我已经试过了，但它不起作用.

md-输入:{颜色:黑色;边框颜色:黑色}

解决方案

我在

假设您使用的是 Angular-CLI

调色板- 选择你想要使用的颜色和它们的色调，例如 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);//棕色 <-- 自定义颜色在这里！$forest-app-accent: md-palette($md-green, A400);//绿色 <-- 此处自定义颜色！$forest-app-warn: md-palette($md-deep-orange, 500);//橙色 <-- 此处自定义颜色！$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 的styles"列表中添加一个指向主题文件(例如，forest-theme.json)的新条目.scss).

angular-cli.json

<代码>{项目": {版本":等等"，"name": "my_forest_app"},应用": [{风格":["styles.css",森林主题.scss"]}],}

3.) 然后在你的组件中你应该能够做这样的事情

import {Component} from '@angular/core';@成分({选择器:'我的应用'，模板:`<md-toolbar color="primary"><span>森林应用程序标题</span></md-工具栏><br/><div><h2>你好{{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">森林警告</button><br><br><md-input color="primary" placeholder="Primary Search"></md-input>

`，})出口类应用{名称:字符串；构造函数(){this.name = 'Angular2 材质'}}

应该这样做，这个页面应该回答他们的任何问题

更新

Angular Material 拥有自己的网站，其中包含大量 指南

I just wanna ask how to change these build-in colors in Angular 2 material.

Its specified in the ng2-material docs: color: "primary"|"accent"|"warn"

How to change colors in these palettes? Or even how to just change that blue color of the text?

I've tried this and it doesn't work.

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

解决方案

I found this on the Angular2 Material github page

Angular Material Home Page

So assuming you are using Angular-CLI

Color Pallette - For selecting the colors you want to use and their shades, eg brown = $md-brown then choose a shade like 800.

1.) First Create a ./src/forest-theme.scss file (Whatever name you want)

@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.) Next: Add a new entry to the "styles" list in angular-cli.json pointing to the theme file (e.g., forest-theme.scss).

angular-cli.json

{
    "project": {
        "version": "blah",
        "name": "my_forest_app"
    },
    "apps": [ 
      {
        "styles": [
            "styles.css",
            "forest-theme.scss"
        ]
      } 
    ],
}

3.) Then in your component you should be able to do something like this

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'
  }

}

That should do it, any questions this page should answer them

Update

Angular Material has its own web site with plenty of Guides

这篇关于更改内置颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！