材质主题 - 如何生成阴影？

Question

大家！ 我想使用 Angular Material 主题创建一个自定义主题，但使用我自己的 3 种颜色。 对于他们的主题，他们创造了这样的阴影：

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

如何为我的自定义颜色生成它们？因为我无法弄清楚。 感谢您的回答。

Answer 1

我已使用此站点为自定义颜色生成阴影。我为您提供了一些示例：

http://mcg.mbitson.com/#!?purple=%233f51b5&yellow=%2326a69a&themename=Stackblitz-Example

页面底部有一个向下箭头。如果您点击它，您可以选择您想要的输出格式（例如 Material UI(React)、Angular 2 等）。