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

问题描述

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

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

我发现了这个问题:AngularJS 2 - Material design - 设置调色板 在这里我可以构建一个据称是自定义的 主题，但它基本上只是使用预构建调色板的不同部分.我不想使用 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?

我需要为我的品牌调色板制作 mixin 吗?如果是这样 - 有关如何正确执行的任何指南?不同深浅的颜色(用数字标记，例如: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.

某些元素可以采用主题颜色，例如 、、、 等.默认情况下，他们将使用 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?).

例如:

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