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

时间:2017-01-03 10:09:47

标签: angular sass material-design angular-material2

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

我发现了这个问题:AngularJS 2 - Material design - set color palette我可以在其中构建一个涉嫌自定义的主题,但它基本上只是使用了预构建的调色板的不同部分。我不想使用Material2的预定义颜色。我想要我独特的特殊品牌颜色。有没有更好的方法(更好??)创建我自己的主题,而不仅仅是_palette.scss

我是否需要为我的品牌调色板制作mixin?如果是的话 - 任何有关如何正确操作的指南?不同色调的含义是什么(标有数字如:50,100,200,A100,A200 ......)?

非常感谢有关此区域的任何信息!

3 个答案:

答案 0 :(得分:148)

经过一番研究后,我得出了这个结论,为我解决了这个问题,希望它对你有所帮助。

步骤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>

答案 1 :(得分:2)

尝试使用下面的网站,这似乎很容易自定义角度主题。 https://materialtheme.arcsine.dev/

答案 2 :(得分:1)

使用 Angular Material v12,材质主题看起来像这样,应该由 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 用于生成颜色。