1回答

接灰的电子产品

2017-11-11

已采纳

当然可以自定义颜色，但可不是直接写上去，首先要定义一个调色板

$mat-tcpalette: (    
  50 : #eee4e9,    
  100 : #d5bbc8,    
  200 : #ba8da3,    
  300 : #9e5f7e,    
  400 : #893d63,    
  500 : #741b47,    
  600 : #6c1840,    
  700 : #611437,    
  800 : #57102f,    
  900 : #440820,    
A100 : #ff7aa7,    
A200 : #ff4786,    
A400 : #ff1464,    
A700 : #fa0055,    
contrast: (    
      50 : #000000,    
      100 : #000000,    
      200 : #000000,    
      300 : #ffffff,    
      400 : #ffffff,    
      500 : #ffffff,    
      600 : #ffffff,    
      700 : #ffffff,    
      800 : #ffffff,    
      900 : #ffffff,    
A100 : #000000,    
A200 : #000000,    
A400 : #ffffff,    
A700 : #ffffff,    
)    
);    
$mat-tcspalette: (    
  50 : #e9f0f1,    
  100 : #c7d9dd,    
  200 : #a2c0c7,    
  300 : #7da7b0,    
  400 : #61949f,    
  500 : #45818e,    
  600 : #3e7986,    
  700 : #366e7b,    
  800 : #2e6471,    
  900 : #1f515f,    
A100 : #9fe9ff,    
A200 : #6cddff,    
A400 : #39d2ff,    
A700 : #1fccff,    
contrast: (    
      50 : #000000,    
      100 : #000000,    
      200 : #000000,    
      300 : #000000,    
      400 : #000000,    
      500 : #ffffff,    
      600 : #ffffff,    
      700 : #ffffff,    
      800 : #ffffff,    
      900 : #ffffff,    
A100 : #000000,    
A200 : #000000,    
A400 : #000000,    
A700 : #000000,    
)    
);

然后，我们用自定义调色板定义我们的主色调和配色调

$tc-primary: mat-palette($mat-tcpalette);    
$tc-accent:  mat-palette($mat-tcspalette, A200, A100, A400);

然后再组成我们的主题

$my-app-theme: mat-light-theme($tc-primary, $tc-accent, $my-app-warn);

但请注意，我上面的代码是基于最新 material 组件版本的，如果是课程版本，可能需要查询一下 beta.7 时的上面这些前缀是md- 还是 mat-

0

1

慕粉18515618681

老师，有没有这个的文档链接呢？我想详细了解一下

2017-11-12

共1条回复