如何在Angular中使用自定义主题调色板?


97

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

我发现了这个问题:AngularJS 2-材质设计-设置调色板,我可以在其中建立一个自定义主题,但它基本上只是使用预先构建的调色板的不同部分。我不想使用Material2的预定义颜色。我想要我独特和特别的品牌色彩。是否有一种比单独修改主题更好的方法(对吗?)_palette.scss

我需要为我的品牌调色板做一个混搭吗?如果是这样-有关如何正确执行操作的任何指南?不同颜色的阴影(标有数字:50、100、200,A100,A200 ...)的含义是什么?

关于这个领域的任何信息将不胜感激!



@anshuVersatile感谢您的输入!我现在了解编号的事情。非常感谢:-)
Narxx '17

Answers:


245

经过研究后,我得出了为我解决的结论,希望它也能对您有所帮助。

步骤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>


在我的情况下,我使用了第三方主题生成器,并且省略了十六进制颜色代码上的哈希符号。它还将每个键和值都用单引号引起来,但是我不确定这是一个问题。添加哈希解决了我的编译问题。
isherwood

1
是的,我只是尝试了一下,而且效果很好。唯一改变的是导入部分。您不需要变量,而只需导入/包括如下材料主题文件: @import '~@angular/material/theming'; @include mat-core();
flackjap

1
看这篇文章,它是在解释非常好所有的作品如何blog.thoughtram.io/angular/2017/05/23/...
马丁安德森

1
@TrevorGoodchild,老实说,我们已经弃用了Angular项目,并使用VueJS从头开始编写它,所以我什至不记得我们最终如何在Angular中定义主题:)只是尝试添加更多颜色变量,并将其全部添加垫光主题功能。
Narxx

1
@Narxx根据以下答案,AXXX值用于浮动操作按钮和交互式元素,其中“ A”代表“重音”。graphicdesign.stackexchange.com/a/69470
特雷弗Karjanis

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.