logo标签列表

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

angularsassmaterial-designangular-material2
162
我希望在整个应用程序中使用公司的品牌颜色。
我找到了这个问题：AngularJS 2 - Material design - set color palette ，在其中我可以构建一个所谓的自定义主题，但它基本上只是使用预构建调色板的不同部分。我不想使用Material2预定义的颜色。我想要我的独特和特殊的品牌颜色。有比使用_palette.scss更好（正确？）的创建自己的主题的方法吗？
我需要为我的品牌调色板制作一个mixin吗？如果需要-如何正确创建？不同色调的颜色（标有50、100、200、A100、A200等数字）的含义是什么？
任何关于这方面的信息都将非常感激！
https://material.angularjs.org/latest/Theming/01_introduction - anshuVersatile
@anshuVersatile 感谢您的输入！我现在明白了编号的事情。非常感谢 :-) - Narxx
3个回答
340

经过一些研究，我得出了这个结论，对我很有帮助，希望能对你也有所帮助。

步骤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是不同的颜色。还不确定（至今）它们在哪里使用。同样，较低的数字表示较亮，而较高的数字表示较暗。

对比度设置字体颜色在这些背景颜色之上。很难（甚至不可能）通过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">登录</button>

1
是的，我刚试过了，它可以工作。唯一改变的是导入部分。您不需要变量，只需像这样导入/包含材料主题文件：`@import '~@angular/material/theming';@include mat-core();` - flackjap
是的，他们经常改变语法 :) 感谢您的更新。如果您愿意，您可以建议对答案进行更正以使其更新（我已经有一段时间没有维护我的Angular2项目了，我们正在转换到Vue.js，所以我可能永远不会再更新我的代码...） - Narxx
3
请看这篇文章，它很好地解释了一切运作方式 https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html - Martin Andersen
1
@TrevorGoodchild 说实话，我们已经弃用了我们的Angular项目，并使用VueJS从头开始编写，所以我甚至不记得我们是如何在Angular中定义主题的 :) 只需尝试添加更多的颜色变量，并将它们全部添加到mat-light-theme函数中即可。 - Narxx
1
根据以下答案，AXXX值用于浮动操作按钮和交互元素，其中“A”代表“强调”。https://graphicdesign.stackexchange.com/a/69470 - Trevor Karjanis
显示剩余7条评论
21

使用 Angular Material v12，一个 Material 主题应该像这样，并且应该通过 styles.scss 导入。

@use '~@angular/material' as mat;
@import './custom-palettes';

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.define-palette(mat.$gray-palette, 900, 800, 900);
$candy-app-accent: mat.define-palette(mat.$green-palette, 900, 800, 900);
$candy-app-warn: mat.define-palette($wfs-blue-palette, 800, 700, 900);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($candy-app-theme);

./custom-palettes看起来像这样:

// see http://mcg.mbitson.com

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

$wfs-blue-palette: (
  50: #eaeef3,
  100: #cad6e0,
  200: #a7bacc,
  300: #849eb7,
  400: #698aa7,
  500: #4f7598,
  600: #486d90,
  700: #3f6285,
  800: #36587b,
  900: #26456a,
  A100: #add1ff,
  A200: #7ab5ff,
  A400: #4798ff,
  A700: #2e8aff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);
与顶部回答相同，http://mcg.mbitson.com 用于生成颜色。
2
这个答案适用于较新版本的Angular。被接受的答案似乎已经过时了。 - DJ House
15
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接