angular-material - 如何使用 Angular Material 和 CSS

Question

所以我承认这非常接近于一个过于宽泛的问题，但我认为这是一个可以接受的问题。

所以一直在玩 Angular Material，是的，它有很多很酷的东西，我喜欢将或多或少的完整网页布局样式指南作为包的一部分的想法(看看 http://www.google.com/design/spec/material-design/introduction.html值得一读)

但我的问题是，如何使用调色板。我在我的 java 脚本中定义了一个调色板(如下所示)

$mdThemingProvider.definePalette('Stackit', {
    "50":"#f6f7f9",
    "100":"#c9d3d9",
    "200":"#a8b8c2",
    "300":"#7d95a5",
    "400":"#6b8798",
    "500":"#5e7787",
    "600":"#516775",
    "700":"#455763",
    "800":"#384751",
    "900":"#2c373f",
    "A100":"#f6f7f9",
    "A200":"#c9d3d9",
    "A400":"#6b8798",
    "A700":"#455763",
    'contrastDefaultColor': 'dark',    // whether, by default, text         (contrast)
    // on this palette should be dark or light
    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
        '200', '300', '400', 'A100'],
    'contrastLightColors': undefined    // could also specify this if default was 'dark'
});

所以我们有一个调色板，它会自动拾取其中一些颜色，例如，运行这段代码，你的 md-toolbar 就会改变颜色。

但是，调色板中有很多颜色，但我还没有想出如何以有用的方式使用它们。

举例来说，我希望我的网页必须有多种类型的部分，一种是浅灰色和黑色文本，一种是深灰色和白色文本，每一种都大约是屏幕大小的一半，可能还有一些图标或图片作为一些文本。

所以我通常会怎么做

<div class=dark style="height: 350px">
    Some welcome text and saying hi
</div>
<div class=light style="height: 350px">
    A nice picture and some other bits
</div>
<div class=dark style="height: 350px">
    Now lets do something with a big button
</div>

所以在 Material Design 中，我将通过设置 layout=row 和 flex，漂亮的布局并向下滚动我的斑马来获得 div。然而，理论上我想从我的调色板中使用颜色 100 表示浅色，使用 600 表示深色，但似乎没有办法这样做。是的，我可以用这些颜色创建一个 CSS 类，但这意味着整个调色板看起来相当浪费。

Answer 1

经过一番胡思乱想，我设法弄清楚了其中的一部分。

有一个 md-accent 选项似乎是为此目的而创建的。您需要先设置重音。

.accentPalette('grey')

在我的例子中，我只需要灰色的，但您可以使用 definePalette 定义整个调色板。因此，使用我们上面的示例，配置如下所示:

    $mdThemingProvider.theme('default')
        .dark()
        .primaryPalette('Stackit')
        .backgroundPalette('Stackit')
        .accentPalette('grey')
        .warnPalette('red');

然后您需要做的就是在黑色背景上制作浅色(灰色)文本:

<H1 class="md-accent">Prototypes</H1>