Question

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

所以一直在使用Angular Material，是的，它有很多很酷的东西，我喜欢或多或少地将完整的样式指南作为包的一部分进行网页布局（看看{{3值得一读）

我的问题是，我如何使用调色板。我在我的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工具栏将改变颜色。

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

例如，我希望我的网页必须包含部分类型，一个浅灰色带黑色文本，一个深灰色带白色文本，每个都大约半个屏幕尺寸，可能还有一些图标或图片，以及作为一些文字。

所以我通常会这样做

<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，nice layout以及向下滚动我的斑马来获得div。但是，从理论上讲，我想在调色板中使用100色作为光，使用600作为暗色，但似乎没有办法这样做。是的，我可以用这些颜色创建一个CSS类，但这意味着整个Palette的东西看起来相当浪费。

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>

如何使用Angular Material和CSS

1 个答案: