如何在 Angular 中使用自定义主题调色板?
How can I use custom theme palettes in Angular?
我想在整个应用程序中使用我公司的品牌颜色。
我发现了这个问题:AngularJS 2 - Material design - set color palette 我可以在其中构建一个 据称是自定义的 主题,但它基本上只是使用预构建调色板的不同部分。我不想使用 Material2 的预定义颜色。我想要我独特而特别的品牌颜色。有没有比使用 _palette.scss
?
更好的方法(更正确?)来创建我自己的主题
我需要为我的品牌调色板做一个 mixin 吗?如果是这样 - 关于如何正确执行的任何指南?不同深浅的颜色(标有数字如:50、100、200、A100、A200...)的含义是什么?
如能提供有关此区域的任何信息,我们将不胜感激!
经过一番研究,我得出了这个结论,为我解决了这个问题,希望对你也有帮助。
第 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(这是我的品牌 color/accent 颜色的真实阴影)。所以在这个例子中,我的品牌颜色是#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>
尝试使用以下网站,这似乎很容易自定义 angular 主题。
https://materialtheme.arcsine.dev/
使用 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 用于生成颜色。
我想在整个应用程序中使用我公司的品牌颜色。
我发现了这个问题:AngularJS 2 - Material design - set color palette 我可以在其中构建一个 据称是自定义的 主题,但它基本上只是使用预构建调色板的不同部分。我不想使用 Material2 的预定义颜色。我想要我独特而特别的品牌颜色。有没有比使用 _palette.scss
?
我需要为我的品牌调色板做一个 mixin 吗?如果是这样 - 关于如何正确执行的任何指南?不同深浅的颜色(标有数字如:50、100、200、A100、A200...)的含义是什么?
如能提供有关此区域的任何信息,我们将不胜感激!
经过一番研究,我得出了这个结论,为我解决了这个问题,希望对你也有帮助。
第 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(这是我的品牌 color/accent 颜色的真实阴影)。所以在这个例子中,我的品牌颜色是#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>
尝试使用以下网站,这似乎很容易自定义 angular 主题。 https://materialtheme.arcsine.dev/
使用 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 用于生成颜色。