अंतर्निहित रंग बदलें

Question

मैं सिर्फ यह पूछना चाहता हूं कि कोणीय 2 सामग्री में इन बिल्ड-इन रंगों को कैसे बदला जाए।

इसके NG2-सामग्री डॉक्स में निर्दिष्ट: color: "primary"|"accent"|"warn"

कैसे इन पट्टियाँ में रंग बदलने के लिए? या यहां तक ​​कि पाठ के उस नीले रंग को कैसे बदलना है?

मैंने कोशिश की है और यह काम नहीं करता है।

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

Answer 1

मैं Angular2 Material github पेज

Angular Material Home Page

पर इस पाया तो यह सोचते हैं आप उपयोग कर रहे Angular-CLI

Color Pallette -। रंग का उपयोग करना चाहते हैं और उनके रंगों, जैसे भूरे रंग = $ MD-भूरे रंग तो 800.

की तरह एक छाया चुनें) सबसे पहले एक ./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); 

) अगला:। एक नया विषय फ़ाइल (जैसे, वन-theme.scss) की ओर इशारा करते angular-cli.json में "शैली" सूची में प्रविष्टि जोड़ें।

कोणीय cli.json

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

।) इसके बाद अपने घटक में आप इस

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 MaterialGuides

Answer 2

जवाब @Logan एच द्वारा दिए गए सही था के बहुत सारे के साथ अपने स्वयं के वेब साइट है, लेकिन पुरानी हो चुकी है।

: के रूप में @Logan एच उसके जवाब में कहा

• Theming your angular 2 material project Github.

• Theming your angular 2 material project Official documentation website.

चरण समान हैं:

इन के लिए नए लिंक हैं

1. अपने कोणीय 2 प्रोजेक्ट के स्रोत/फ़ोल्डर के तहत एक फ़ाइल (theme.scss) बनाएं
2. कोणीय-cli.json या .angular-cli.json में निर्दिष्ट शैलियों की सरणी में फ़ाइल नाम जोड़ें अपने एनजी प्रोजेक्ट पर निर्भर करता है संस्करण:

.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 \ सामग्री \ कोर \ theming_palette.scss)

अद्यतन

कोणीय सामग्री 2 (बीटा 3) कुछ रास्तों को बदल दिया है के पिछले संस्करण में, see here.

तोड़ने परिवर्तन कर रहे हैं: pallette आयात करने के लिए

1. नया पथ या अपना स्वयं का विषय बनाने के लिए। पथ src/theme.scss@import '~ @ कोणीय/सामग्री/कोर/थीमिंग/ऑल-थीम' में बदलता है; से @import '~ @ कोणीय/सामग्री/थीमिंग'; ऐसा ही होगा यदि आप केवल पूर्व-निर्मित थीम आयात कर रहे हैं, एम्बर थीम के लिए नया पथ @import '~@angular/material/prebuilt-themes/deeppurple-amber.css' है;

2. के बाद से सामग्री 2 बीटा 3 कोणीय 4 (कोणीय नवीनतम संस्करण) पर निर्भर करता है, हम BrowserAnimationsModule या NoopAnimationsModule से एनीमेशन मॉड्यूल हमारे मुख्य मॉड्यूल में आयात करने की आवश्यकता है और मैं बोली:

अब एनिमेशन को एक अलग पैकेज में रीफैक्टर किया गया है, @ कोणीय/सामग्री के उपयोगकर्ताओं को स्पष्ट रूप से आयात करने की आवश्यकता है ब्राउज़र एनीमेशन मॉड्यूल (या NoopAnimat आयन मॉड्यूल) @ कोणीय/पैकेज-ब्राउज़र/एनिमेशन के साथ-साथ @ कोणीय/एनिमेशन स्थापित करना।