Vật liệu góc - đặt bảng màu

Question

Tôi đang cố gắng thiết lập dự án Angular kết hợp với thiết kế material design. Một phần của package.json của tôi trông như thế này:

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

trong AngularJS 1 bạn có thể thiết lập các bảng màu để các ứng dụng thông qua các mdThemingProvider:

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

Bây giờ tôi muốn làm điều tương tự cho Angular, nhưng không biết làm thế nào để làm điều này. Tôi có cần thiết lập bảng màu thông qua một nhà cung cấp (sau đó nhà cung cấp có thể được sử dụng và làm thế nào nó có thể được cấu hình?). Hoặc tôi có cần phải bao gồm các tập tin scss từ các mô-đun vật chất góc trong tập tin scss lõi của tôi và thiết lập một số tài sản?

Answer 1

Thật không may, vì Angular 2 vẫn còn trong alpha ngay bây giờ, cách duy nhất để thay đổi bảng màu là sửa đổi trực tiếp _default-theme.scss và tạo gói npm mới.

Theo một thành viên góc:

@ samio80 Các phong cách hiện đang viết với theming trong tâm trí, nhưng chúng tôi không có một chiến lược triển khai cho theming đã sẵn sàng chưa. Theo cách giải quyết trong thời gian chờ đợi, bạn có thể kéo nguồn trực tiếp và tùy chỉnh chủ đề bằng cách sửa đổi _default-theme.scss và tạo gói npm (thông qua tập lệnh stage-release.sh).

Nguồn: https://github.com/angular/material2/issues/287

Answer 2

góc Chất liệu 2 đã được cập nhật alpha 9 bây giờ và mang lại hỗ trợ cho các chủ đề. Theming Documentation giải thích cách bạn có thể triển khai toàn bộ chủ đề tùy chỉnh của riêng mình vào ứng dụng của mình.

Đây là nội dung của tệp sass tài liệu. Bạn có thể quyết định không sử dụng các màu vật liệu được cung cấp và sử dụng màu của riêng bạn.

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

Cần lưu ý rằng trong khi theming hỗ trợ là availible, nó không được hoàn thành và các tài liệu nói rằng họ có kế hoạch để làm điều này dễ dàng hơn khi thời gian trôi trên. Tuy nhiên trạng thái hiện tại hoạt động khá tốt.

Answer 3

Đối với việc sử dụng các lược đồ màu vật liệu được xác định trước, bạn luôn có thể làm theo hướng dẫn theming available here.

Nếu bạn muốn xác định màu sắc của công ty riêng của bạn, chỉ cần xác định một bảng màu tùy chỉnh trước đó và thông qua đó để các mat-palette() chức năng:

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

sắc thái màu sắc Deafult sử dụng từ bảng màu là 500 (mặc định), 100 (nhẹ hơn) và 700 (tối hơn). Cách dễ nhất để tạo bảng màu tùy chỉnh là sao chép bảng màu trên from the standard palettes và điều chỉnh theo ý thích của bạn.