如何在Angular中使用自定义主题调色板? [英] How can I use custom theme palettes in Angular?

问题描述

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

I want to use my company's brand colors throughout the app.

我发现了此问题: AngularJS 2-材质设计-设置调色板，在那里我可以构建一个可以自定义主题，但它基本上只是使用预先构建的调色板的不同部分.我不想使用Material2的预定义颜色.我想要我独特和特别的品牌色彩.除了仅仅使用_palette.scss乱搞之外，还有一种更好的方法(对吗?)来创建我自己的主题?

I have found this issue: AngularJS 2 - Material design - set color palette where I can build an allegedly custom theme, but it's basically just using different parts of pre-built palettes. I don't want to use Material2's predefined colors. I want my unique and special brand colors. Is there a better way (righter?) to create my own theme, than just hack around with _palette.scss?

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

Do I need to make a mixin for my brand palette? If so - any guides on how to do it properly? What are the meanings of the different shades of colors (marked with numbers like: 50, 100, 200, A100, A200...)?

有关此领域的任何信息将不胜感激！

Any information about this area will be much appreciated!

推荐答案

经过一番研究，我得出了为我解决的结论，希望它也能为您提供帮助.

After some research I ended up with this conclusion which solved it for me, hope it will help you too.

创建了一个很棒的网站，您可以在其中输入品牌颜色，并且使用该品牌颜色的不同阴影创建一个完整的调色板: http://mcg.mbitson.com

Found this awesome website where you enter your brand color, and it creates a complete palette with the different shades of that brand color: http://mcg.mbitson.com

我同时使用了该工具来显示我的primary颜色(这是我的品牌颜色)和accent颜色.

I used this tool for both my primary color (which is my brand color) and the accent color.

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

here is a guide how to create such .scss file: 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是不同的阴影.尚不确定(在哪里)它们在哪里使用.同样，较小的数字表示较亮，较高的数字表示较暗.

Some explanation on the code above

The numbers on the left side set the "level" of brightness. The default is 500 (which is the true shade of my brand color/accent color). So in this example, my brand color is #5282c1. The rest are other shades of that color (where lower numbers mean brighter shades and higher numbers mean darker shades). The AXXX are different shades. Not sure (yet) where they are in use. Again, a lower number means brighter and higher numbers means darker.

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

The contrast sets the font color over those background colors. It's very hard (or even impossible) to calculate via CSS where the font should be bright (white) or dark (black with 0.87 opacity) so it is easily readable even to color blind people. So this is set manually and hard-coded into the palette definition. You get this also from the palette generator I linked above (although it's being outputted in the old Material1 format, and you'll have to manually convert this to Material2 format like I posted here).

设置主题以使用品牌调色板作为primary颜色，以及将要强调的内容用作accent颜色.

Set the theme to use the brand color palette as the primary color, and whatever you have for accent as your accent color.

某些元素可以采用主题颜色，例如<md-toolbar>，<md-input>，<md-button>，<md-select>等.他们将默认使用primary，因此请确保将品牌调色板设置为主要调色板.如果要更改颜色，请使用color指令(它是Angular指令吗?).

Some elements can take the theme colors, like <md-toolbar>, <md-input>, <md-button>, <md-select> and so on. They will use primary by default so make sure you set the brand color palette as primary. If you want to change the color, use the color directive (is it an Angular directive?).

例如:

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

这篇关于如何在Angular中使用自定义主题调色板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！