Question

如何为$ primary和$ accent使用相同的颜色我有自己的自定义白色。

$mat-white: ( 100: #FFF, 200: #FFF, 300: #FFF, 400: #FFF, 500: #FFF, 600: #FFF, 700: #FFF,
              800: #FFF, 900: #FFF, A100: #FFF, A200: #FFF, A400: #FFF, A700: #FFF,
              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: white, A700: white, ) );
//

并设置颜色

$primary: mat-palette($mat-white, 600, 100, 800);
$accent:  mat-palette($mat-white, 600, 100, 800);

实际上我在悬停时有黑色和白色我希望拥有相同的白色

Answer 1

您可以像您一样定义自定义颜色集。以下是材料_theming.scss的一组颜色示例：

$your-custom-color-scheme: (
  50: #fce4ec,
  100: #f8bbd0,
  200: #f48fb1,
  300: #f06292,
  400: #ec407a,
  500: #e91e63,
  600: #d81b60,
  700: #c2185b,
  800: #ad1457,
  900: #880e4f,
  A100: #ff80ab,
  A200: #ff4081,
  A400: #f50057,
  A700: #c51162,
  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-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

然后将其传递给primary | accent | warn的定义，其定义如下：

$app-primary: mat-palette($your-custom-color-scheme, 600);

然后像这样传递给主题mixin：

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

然后这个＆＃39;混合＆＃39;变量$theme将包含在您的样式中：

@include angular-material-theme($theme);

材料设计2，主色和强调色

1 个答案: