角度材質 - 設置調色板

Question

我正在嘗試設置與材質設計相結合的Angular項目。 我的package.json的一部分是這樣的：

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

現在我想要做同樣的事情：

"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" 
    }, 

AngularJS 1中

你可以通過mdThemingProvider調色板設置爲應用程序對於Angular來說，但不知道該怎麼做。 我是否需要通過提供者設置調色板（然後可以使用哪個提供者以及如何配置？）。或者是否需要在我的核心scss文件中包含角度材質模塊中的scss文件並設置一些屬性？

Answer 1

不幸的是，由於角2仍處於alpha現在，只有這樣，才能改變調色板是直接修改_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並根據自己的喜好進行調整。