如何使用角度自定义主题调色板？

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

我发现了这个问题: AngularJS2-材料设计-设置调色板，在这里我可以构建一个 据说是定制的主题，但它基本上只是使用预先构建的调色板的不同部分。我不想使用“材质2”的预定义颜色。我想要我独特的品牌颜色。有没有更好的方法(对吗?)创造我自己的主题，而不是随便用 _palette.scss？

我需要为我的品牌调色板做一个混音吗？如果是的话——有没有关于如何正确使用它的指南？不同色度的颜色的含义是什么(用数字标记如: 50,100,200，A100，A200...) ？

任何关于这个地区的信息都将非常感谢！

86604 次浏览
小开
最佳答案

经过一些研究，我得出了这个结论，为我解决了这个问题，希望对你也有所帮助。

步骤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不透明度) ，所以它很容易阅读，即使是色盲的人。因此，这是手动设置和硬编码到调色板定义。您还可以从上面链接的调色板生成器中获得这些信息(尽管它是以旧的 Materials al1格式输出的，并且您必须像我在这里发布的那样手动将其转换为 Materials al2格式)。

将主题设置为使用品牌调色板作为 primary颜色，并将任何用于强调的颜色作为 accent颜色。

第三步: 在应用程序的任何地方使用主题

有些元素可以采用主题颜色，如 <md-toolbar>、 <md-input>、 <md-button>、 <md-select>等。它们默认使用 primary，所以请确保将品牌调色板设置为主调色板。如果你想改变颜色，使用 color指令(它是一个角度指令?).

例如:

<button mat-raised-button color="accent" type="submit">Login</button>

小开

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

小开

与角材质 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,
)
);

与 top 应答一样，http://mcg.mbitson.com用于生成颜色。


提交答案