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

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

大家！ 我想使用 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,)
);

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

解决方法

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

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

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