我发现了这个问题：AngularJS 2 – Material design – set color palette我可以构建一个涉嫌定制的主题，但它基本上只是使用了预制调色板的不同部分。我不想使用Material2的预定义颜色。我想要我独特的特殊品牌颜色。有没有更好的方法(更好？？)来创建我自己的主题，而不仅仅是使用_palette.scss？
我是否需要为我的品牌调色板制作mixin？如果是的话 – 任何有关如何正确操作的指南？不同色调的含义是什么(标有数字如：50,100,200，A100，A200 ……)？
任何有关这方面的信息将不胜感激！
第1步：使用品牌颜色创建自己的调色板。
找到这个令人敬畏的网站，您可以在其中输入您的品牌颜色，并创建一个完整的调色板，具有该品牌颜色的不同色调：http://mcg.mbitson.com
我将这个工具用于我的主要颜色(这是我的品牌颜色)和强调颜色。
这里有一个指南如何创建这样的.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,A200: #fff7f4,A400: #fc8259,A700: #f44205,)
);
// 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是不同的色调。尚不确定它们在哪里使用。同样，较低的数字表示更亮，而较高的数字表示较暗。
对比度设置字体颜色超过这些背景颜色。通过CSS计算字体应该是明亮的(白色)还是黑色(黑色具有0.87不透明度)非常困难(甚至不可能)，因此即使对于色盲人群也很容易阅读。因此，这是手动设置并硬编码到调色板定义中。你也可以从我上面链接的调色板生成器得到这个(虽然它是以旧的Material1格式输出的，你必须手动将它转换为Material2格式，就像我在这里发布的那样)。
将主题设置为使用品牌调色板作为主要颜色，并将重点用作重点颜色。
第3步：尽可能在整个应用程序中使用主题
某些元素可以采用主题颜色，例如< md-toolbar>，< md-input>，< md-button>，< md-select>等等。默认情况下，它们将使用primary，因此请确保将品牌调色板设置为primary。如果要更改颜色，请使用颜色指令(它是Angular指令吗？)。
例如：
< button mat-raised-button color =“accent”type =“submit”>登录< / button>
