材料 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 调色板对比色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！