Question

我必须在我的angular2应用程序中实现自定义主题。我已经提供了这样的颜色文件：

   $color-material-blue-T50: fade($color-material-500, 12%);
   $color-material-blue-T100: fade($color-material-500, 26%);
   $color-material-blue-T200: fade($color-material-500, 54%);
   $color-material-blue-T400: fade($color-material-500, 87%);
   $color-material-white: #ffffff;
   $color-material-500:#2196f3;
   $color-material-white: #ffffff;
   $color-primary: $color-material-white;
   $color-accent: $color-material-500;
   $color-warning: $color-material-amber-A700;
   $color-material-amber-A600:#FFBC00;
   $color-material-amber-A700:#FFAB00;
   $color-material-amber-A800:#ff9000;

我创建了一个自定义文件，如下所示：

$my-app-primary: mat-palette($color-primary);
$my-app-accent:  mat-palette($color-accent, A200, A100, A400);
$my-app-warn:    mat-palette($color-warning);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent,$my-app-warn);
@include angular-material-theme($my-app-theme);

这给了我一个错误$map的{{1}}参数必须是地图。我不确定如何使用给我的颜色来应用自定义主题。

Answer 1

如果要创建自定义调色板，它应该与默认的材质相匹配。它们看起来像这样：

$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  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: white,
    A400: white,
    A700: white,
  )
);

您不需要提供每个单值，只需要提供默认值，更亮和更暗的值。您还需要确保为您定义的每个值都有相应的contrast值。

编辑：所以你的看起来像

$my-custom-palette: (
  200: $my-light-palette-color,
  500: $my-default-palette-color,
  900: $my-dark-palette-color,
  contrast: (
    200: $black-87-opacity,
    500: $black-87-opacity,
    900: $white-87-opacity,
  )
);

$my-app-primary: mat-palette($my-custom-palette, 500, 200, 900);
$my-app-accent: mat-palette($mat-pink);

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

在material2中实现自定义主题

1 个答案: