アングル材 - カラーパレットを設定

Question

アングル材をマテリアルデザインと組み合わせてセットアップしようとしています。 私のpackage.jsonの一部は次のようになります。AngularJS 1以内

"dependencies": { 
    "@angular2-material/button": "2.0.0-alpha.3", 
    "@angular2-material/card": "2.0.0-alpha.3", 
    "@angular2-material/checkbox": "2.0.0-alpha.3", 
    "@angular2-material/core": "2.0.0-alpha.3", 
    "@angular2-material/input": "2.0.0-alpha.3", 
    "@angular2-material/list": "2.0.0-alpha.3", 
    "@angular2-material/progress-bar": "2.0.0-alpha.3", 
    "@angular2-material/progress-circle": "2.0.0-alpha.3", 
    "@angular2-material/radio": "2.0.0-alpha.3", 
    "@angular2-material/sidenav": "2.0.0-alpha.3", 
    "@angular2-material/toolbar": "2.0.0-alpha.3", 
    "angular2": "2.0.0-beta.16", 
    "core-js": "^2.2.2", 
    "normalize.css": "^4.1.1", 
    "rxjs": "5.0.0-beta.2", 
    "zone.js": "~0.6.12" 
    }, 

あなたはmdThemingProvider経由でアプリにカラーパレットを設定できます

angular.module('myApp', ['ngMaterial']).config(function($mdThemingProvider) { 
    $mdThemingProvider.theme('default') 
    .primaryPalette('pink') 
    .accentPalette('orange'); 
}); 

は今、私は同じことをしたいですAngularの場合は、これを行う方法はわかりません。 パレットをプロバイダ経由で設定する必要があります（どのプロバイダを使用でき、どのように設定できますか？）。または、角度材料モジュールのscssファイルをコアのscssファイルに含めて、いくつかのプロパティを設定する必要がありますか？角度2が今のアルファにまだあるので、

Answer 1

は残念ながら、カラーパレットを変更する唯一の方法は、直接_default-theme.scssを変更し、新しいNPMパッケージを作成することです。角度のメンバーによると

：samio80スタイル@

は現在、心の中でテーマで書かれているが、我々はまだ準備ができてテーマ設定のための展開戦略を持っていない 。その間に 回避策として、ソースを直接プルすることができます。 _default-theme.scssを修正し、npm パッケージを作成して（スクリプトstage-release.shを介して）、テーマをカスタマイズできます。

出典：https://github.com/angular/material2/issues/287

Answer 2

角度資料2は現在、アルファ9に更新し、テーマのサポートをもたらしてきました。 Theming Documentationは、アプリケーションに独自のカスタムテーマを完全に実装する方法を説明しています。

ここには、ドキュメントsassファイルの内容があります。あなたは提供された材料の色を使用しないように決めることができ、独自のものを使用します。

@import '~@angular/material/core/theming/all-theme'; 
// 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 md-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. 
$primary: md-palette($md-indigo); 
$accent: md-palette($md-pink, A200, A100, A400); 

// The warn palette is optional (defaults to red). 
$warn: md-palette($md-red); 

// Create the theme object (a Sass map containing all of the palettes). 
$theme: md-light-theme($primary, $accent, $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($theme); 

テーマ設定サポートがフィットネスエクササイズですが、それが確定し、ドキュメントが、彼らは時間が経つにつれて、これがさらに簡単にするために計画することを述べていないことに留意すべきです。しかし、現在の状態は非常にうまく機能します。

Answer 3

予め定義されたマテリアルカラースキームを使用する場合は、いつでもテーマガイドavailable hereに従うことができます。

あなたは、あなた自身のコーポレートカラースキームを定義するだけで、事前にカスタムパレットを定義し、mat-palette()関数にそれを渡したい場合は

：パレットから使用

...  
$mat-custom: (
      50: #e0f2f1, 
      100: #b2dfdb, 
      200: #80cbc4, 
      300: #4db6ac, 
      400: #26a69a, 
      500: #009688, 
      600: #00897b, 
      700: #00796b, 
      800: #00695c, 
      900: #004d40, 
      A100: #a7ffeb, 
      A200: #64ffda, 
      A400: #1de9b6, 
      A700: #00bfa5, 
      contrast: (
        50: $black-87-opacity, 
        100: $black-87-opacity, 
        200: $black-87-opacity, 
        300: $black-87-opacity, 
        400: $black-87-opacity, 
        500: white, 
        600: white, 
        700: white, 
        800: $white-87-opacity, 
        900: $white-87-opacity, 
        A100: $black-87-opacity, 
        A200: $black-87-opacity, 
        A400: $black-87-opacity, 
        A700: $black-87-opacity, 
      ) 
    ); 

    // 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. 
    $candy-app-primary: mat-palette($mat-custom); 
    ... 

Deafult色合いは、500（デフォルト）、100 （より明るい）および700（暗い）。カスタムカラースキームを作成する最も簡単な方法は、from the standard palettesにパレットをコピーして好みに合わせることです。