Sau một số nghiên cứu, tôi đã đưa ra kết luận này và giải quyết được nó cho tôi, hy vọng nó cũng sẽ giúp ích cho bạn.
Bước 1: Tạo bảng màu của riêng bạn từ màu thương hiệu.
Tìm thấy trang web tuyệt vời này, nơi bạn nhập màu thương hiệu của mình và nó tạo ra một bảng màu hoàn chỉnh với các sắc thái khác nhau của màu thương hiệu đó: http://mcg.mbitson.com
Tôi đã sử dụng công cụ này cho cả primarymàu của tôi (là màu thương hiệu của tôi) và accentmàu.
Bước 2: Tạo bảng màu trong tệp chủ đề tùy chỉnh của bạn
đây là hướng dẫn cách tạo .scsstệp như vậy : https://github.com/angular/material2/blob/master/guides/theming.md
@import '~@angular/material/theming';
// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core();
// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
50: #ffffff,
100: #dde6f3,
200: #b4c9e4,
300: #7fa3d1,
400: #6992c9,
500: #5282c1,
600: #4072b4,
700: #38649d,
800: #305687,
900: #284770,
A100: #ffffff,
A200: #dde6f3,
A400: #6992c9,
A700: #38649d,
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,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white,
)
);
$bv-orange: (
50: #ffffff,
100: #fff7f4,
200: #fecdbd,
300: #fc9977,
400: #fc8259,
500: #fb6c3b,
600: #fa551d,
700: #f44205,
800: #d63a04,
900: #b83204,
A100: #ffffff,
A200: #fff7f4,
A400: #fc8259,
A700: #f44205,
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,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white,
)
);
// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent: mat-palette($bv-orange);
// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);
// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);
Một số giải thích về đoạn mã trên
Các con số ở phía bên trái thiết lập "mức" độ sáng. Giá trị mặc định là 500 (là màu thực của màu thương hiệu / màu nhấn của tôi). Vì vậy, trong ví dụ này, màu thương hiệu của tôi là #5282c1. Phần còn lại là các sắc thái khác của màu đó (trong đó số thấp hơn có nghĩa là sắc thái sáng hơn và số cao hơn có nghĩa là sắc thái tối hơn). Các AXXXsắc thái khác nhau. Không chắc chắn (chưa) chúng đang được sử dụng ở đâu. Một lần nữa, số thấp hơn có nghĩa là sáng hơn và số cao hơn có nghĩa là tối hơn.
Các contrastthiết lập màu chữ trên các màu nền đó. Rất khó (hoặc thậm chí không thể) để tính toán thông qua CSS trong đó phông chữ phải sáng (trắng) hoặc tối (đen với độ mờ 0,87) để nó có thể dễ dàng đọc được ngay cả với những người mù màu. Vì vậy, điều này được đặt thủ công và được mã hóa cứng vào định nghĩa bảng màu. Bạn cũng nhận được điều này từ trình tạo bảng màu mà tôi đã liên kết ở trên (mặc dù nó đang được xuất ở định dạng Material1 cũ và bạn sẽ phải chuyển đổi thủ công này sang định dạng Material2 như tôi đã đăng ở đây).
Đặt chủ đề để sử dụng bảng màu thương hiệu làm primarymàu và bất kỳ thứ gì bạn có để làm điểm nhấn làm accentmàu của bạn .
Bước 3: Sử dụng chủ đề xuyên suốt ứng dụng ở bất cứ đâu bạn có thể
Một số yếu tố có thể mang màu sắc chủ đề, như <md-toolbar>, <md-input>, <md-button>, <md-select>và vân vân. Chúng sẽ sử dụng primarytheo mặc định, vì vậy hãy đảm bảo bạn đặt bảng màu thương hiệu làm chính. Nếu bạn muốn thay đổi màu sắc, hãy sử dụng colorchỉ thị (nó có phải là chỉ thị Angular không?).
Ví dụ:
<button mat-raised-button color="accent" type="submit">Login</button>