使用角度材质2创建超过3种颜色的主题

Question

为角度材质2创建主题时,表示您可以设置以下颜色:主要,重音,警告前景和背景颜色.

但是你创建主题的方式只支持3种颜色/调色板:

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme)

所以我的第一个问题是我如何定义一个主题foreground和background颜色？

是否也可以定义更多颜色？我可以用我的自定义组件,例如

Answer 1

前景和background颜色应用在调色板中。背景颜色为50、100、200等，并且foreground颜色处于对比之下。检查一下：

$md-my-fancy-pink: (
    50 : #fbe4ec,
    100 : #f6bccf,
    200 : #f08fb0,
    300 : #ea6290,
    400 : #e64078,
    500 : #e11e60,
    600 : #dd1a58,
    700 : #d9164e,
    800 : #d51244,
    900 : #cd0a33,
    A100 : #fff7f9,
    A200 : #ffc4ce,
    A400 : #ff91a4,
    A700 : #ff788f,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

例如，当您创建一个材质按钮时<button md-raised-button>Click Me</button>，背景将为#e11e60，前景将为#ffffff。

一般背景和前景颜色可以通过 css (styles.css) 设置。它只是 css 中的一行，不需要让它处理角度材质。只需这样做：

html,
body {
    background: #f2f2f2;
    color: #333333;
}