angular - 我如何在 Angular 中使用自定义主题调色板？

Question

我想在整个应用中使用我公司的品牌颜色。

我发现了这个问题:AngularJS 2 - Material design - set color palette我可以在其中构建一个据称是自定义的 主题，但它基本上只是使用预构建调色板的不同部分。我不想使用 Material2 的预定义颜色。我想要我独特而特别的品牌颜色。除了使用 _palette.scss 之外，是否有更好的方法(更正确？)来创建我自己的主题？

我需要为我的品牌调色板做一个 mixin 吗？如果是这样 - 关于如何正确执行的任何指南？不同深浅的颜色(标有数字，例如:50、100、200、A100、A200...)的含义是什么？

如能提供有关此领域的任何信息，我们将不胜感激!

Answer 1

经过一番研究，我得出了这个结论，为我解决了这个问题，希望对你也有帮助。

第 1 步:根据品牌颜色创建您自己的调色板。

找到这个很棒的网站，您可以在其中输入您的品牌颜色，它会创建一个包含该品牌颜色不同深浅的完整调色板:http://mcg.mbitson.com

我将此工具用于我的 primary颜色(这是我的品牌颜色)和 accent颜色。

第 2 步:在您的自定义主题文件中创建调色板

这是一个如何创建这样的指南 .scss文件:https://github.com/angular/material2/blob/master/guides/theming.md

@import '~@angular/material/theming';

// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core(); 

// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
    50: #ffffff,
    100: #dde6f3,
    200: #b4c9e4,
    300: #7fa3d1,
    400: #6992c9,
    500: #5282c1,
    600: #4072b4,
    700: #38649d,
    800: #305687,
    900: #284770,
    A100: #ffffff,
    A200: #dde6f3,
    A400: #6992c9,
    A700: #38649d,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

$bv-orange: (
    50: #ffffff,
    100: #fff7f4,
    200: #fecdbd,
    300: #fc9977,
    400: #fc8259,
    500: #fb6c3b,
    600: #fa551d,
    700: #f44205,
    800: #d63a04,
    900: #b83204,
    A100: #ffffff,
    A200: #fff7f4,
    A400: #fc8259,
    A700: #f44205,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent:  mat-palette($bv-orange);

// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);

// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);

对上面代码的一些解释

左侧的数字设置亮度的“级别”。默认值为 500(这是我的品牌颜色/强调色的真实阴影)。所以在这个例子中，我的品牌颜色是#5282c1 .其余是该颜色的其他色调(其中较低的数字表示较亮的色调，较高的数字表示较暗的色调)。 AXXX是不同的色调。不确定(还)在哪里使用它们。同样，较低的数字表示较亮，较高的数字表示较暗。

contrast在这些背景颜色上设置字体颜色。很难(甚至不可能)通过 CSS 计算字体应该是明亮的(白色)还是黑暗的(不透明度为 0.87 的黑色)，因此即使对于色盲的人来说也很容易阅读。所以这是手动设置并硬编码到调色板定义中。你也可以从我上面链接的调色板生成器中得到这个(尽管它是以旧的 Material1 格式输出的，你必须手动将其转换为 Material2 格式，就像我在此处发布的那样)。

将主题设置为使用品牌调色板作为 primary颜色，以及你有什么口音作为你的accent颜色。

第 3 步:尽可能在整个应用中使用主题

一些元素可以采用主题颜色，比如<md-toolbar> , <md-input> , <md-button> , <md-select>等等。他们将使用 primary默认情况下，请确保将品牌调色板设置为主要调色板。如果要更改颜色，请使用 color指令(它是 Angular 指令吗？)。

例如:

<button mat-raised-button color="accent" type="submit">Login</button>