材质2对比色

问题描述

在帕莱塔，我可以看到对比.如何选择对比色?

In the paletta, I can see contrast.How can I choose a contrast color?

有效:

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

如何使用对比度?

推荐答案

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

If you use custom themes, sometimes it is useful to get the contrast for the default, lighter or darker presets. For example, in your styles.scss you can set the following custom theme:

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

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

Then, in your component theme you can do the following:

@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'
  }
}

这篇关于材质2对比色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！