Ändern Sie die integrierten Farben

Question

Ich möchte nur fragen, wie Sie diese eingebauten Farben in Angular 2 Material ändern.

Sein in dem NG2-Material docs angegeben: color: "primary"|"accent"|"warn"

Wie Farben in diesen Paletten ändern? Oder wie ändere ich einfach die blaue Farbe des Textes?

Ich habe das versucht und es funktioniert nicht.

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

Answer 1

fand ich dies auf der Angular2 Material github Seite

Angular Material Home Page

So vorausgesetzt, Sie verwenden Angular-CLI

Color Pallette - Für die Farben auswählen, die Sie verwenden und ihre Schatten wollen, zB braun = $ md-braun dann einen Schatten wählen wie 800.

) Zuerst erstellen ./src/forest-theme.scss Datei (Welchen Namen Sie möchten)

.

@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); 

) Next:. einen neuen Eintrag in die "Stile" -Liste in angular-cli.json in das Thema Datei verweist (zB Wald theme.scss).

Winkel cli.json

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

.) Dann in Ihrer Komponente sollten Sie in der Lage sein, so etwas wie dieses

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

} 

zu tun, dass es tun sollten, werden alle Fragen Diese Seite sollte antworten

Update

Angular Material hat seine eigene Website mit vielen Guides

Answer 2

Die Antwort von @Logan H war richtig, aber ist veraltet.

Dies sind die neuen Verbindungen für:

• Theming your angular 2 material project Github.

• Theming your angular 2 material project Official documentation website.

Die Schritte sind die gleichen wie @Logan H in seiner Antwort sagte:

1. Erstellen Sie eine Datei (theme.scss) unter dem Ordner src/Ihres angular 2-Projekts
2. Fügen Sie den Dateinamen in dem in angle-cli.json angegebenen Array hinzu, oder .angular-cli.json hängt von Ihrem ng-Projekt ab Version:

.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); 

In den Kommentaren wird erklärt, wo Sie die Auswahl an Farben und Optionen finden. pallette.scss (\ node_modules \ @angular \ Material \ core \ theming_palette.scss)

UPDATE

in der letzten Version von Winkelmaterial 2 (Beta 3) einige Pfade geändert haben, see here.

Die Bruch Änderungen sind:

1. Neuer Pfad pallette zu importieren oder Ihr eigenes Thema zu erstellen. Der Pfad ändert sich in src/theme.scss von @import '~ @ eckig/material/core/theming/all-theme'; bis @import '~ @ angular/material/theming'; Das gleiche würde passieren, wenn Sie nur ein vorgefertigtes Thema importieren, ist der neue Pfad für Bernstein Thema @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

2. Da Werkstoff 2 Beta 3 ist abhängig von Angular 4 (Angular neueste Version), müssen wir in unserem Hauptmodul das Animationsmodul von BrowserAnimationsModule oder NoopAnimationsModule importieren und ich zitiere:

Nun, da die Animationen in ein separates Paket umstrukturiert wurden, müssen Benutzer von @ angular/material explizit BrowserAnimationsModule (oder NoopAnimat ionsModule) von @ eckigen/Paket-Browser/Animationen sowie die Installation @ angular/Animationen.