材料 2 调色板对比色答案

【问题标题】：material 2 paletta contrast color材料 2 调色板对比色
【发布时间】：2017-09-20 17:52:21
【问题描述】：

在调色板中，我可以看到对比。如何选择对比色？

作品：

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

如何使用对比度？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

解决办法是：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@Vivz 这个函数，在角材料 sass 中，没有记录。我更新并添加了一个来自 github 代码的链接，可以帮助理解这个函数是如何工作的。
因为 -1.这解决了我的问题，我投了赞成票，所以人们知道这是解决方案。

【解决方案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'
  }
}

【讨论】：