经过研究后,我得出了为我解决的结论,希望它也能对您有所帮助。
步骤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>