Question

当您创建theme for angular material2时，表示您可以设置以下颜色：主要，重音，警告前景和背景颜色。

但是你创建主题的方式只支持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颜色？

是否也可以定义更多颜色？我可以用于custom components例如

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）设置常规背景和foregorund颜色。它只是css中的一行，它不需要让它处理角度材料。就这样做：

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

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

1 个答案: