不使用Material的调色板颜色创建Angular主题

时间:2019-01-02 20:57:30

标签: css angular angular-material-6 angular-material-theming

是否可以使用自己的十六进制代码以有角材料创建主题?

而不是像这样的东西

$my-theme-primary: mat-palette($mat-blue, 800);
$my-theme-accent: mat-palette($mat-orange);
$my-theme-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

做这样的事情

$my-theme-primary: #1565C0;
$my-theme-accent: #f4b942;
$my-theme-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

基本上,我有用户创建自己的主题

2 个答案:

答案 0 :(得分:0)

是-但不是您所显示的方式。 “主题”对象由使用mat-palette函数创建的“调色板”组成,该函数返回键-色对的映射。您可以在调色板对象中使用自己的十六进制颜色值-这是添加自定义主题的标准方法。参见https://material.angular.io/guide/theming#defining-a-custom-theme

答案 1 :(得分:0)

$mat-primarycolor: (
500: #1565C0
);
$mat-accentcolor: (
 500: #f4b942
);

$my-theme-primary: mat-palette($mat-primarycolor);
$my-theme-accent:  mat-palette($mat-accentcolor);
$my-theme-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

请尝试使用此代码。可以帮助