angular - 使用 Angular material2 创建超过 3 种颜色的主题

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

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

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

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