材料2 paletta对比色

Question

在paletta中,我可以看到对比.如何选择对比色？

作品:

scss
mat-color($button-primary);

不工作

scss 
mat-color($button-primary, contrast(900));

在底部看它说对比.

scss
$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,
  )
);

我该如何使用对比度？

Answer 1

color: mat-contrast($mat-red, 900);

链接供参考:https: //github.com/angular/material2/blob/2.0.0-beta.8/src/lib/core/theming/_theming.scss#L4

Answer 2

解决办法是：

.test {
  color: mat-color($button-primary, 900-contrast)
}

Answer 3

如果您使用自定义主题，有时获取默认、较亮或较暗预设的对比度会很有用。例如，在你的styles.scss 中，你可以设置以下自定义主题：

$default-primary: mat-palette($mat-blue, 500, 300, 700);
$default-accent: mat-palette($mat-red, 500, 50, 900);
$default-warn: mat-palette($mat-deep-orange);        

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

@include my-component-theme($default-theme);

然后，在您的组件主题中，您可以执行以下操作：

@mixin my-component-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .test {
      color: mat-color($primary, default-contrast); // or 'lighter-contrast' or 'darker-contrast'
  }
}