超过3种颜色的角度主题 [英] Angular theme with more than 3 colors

问题描述

我想用三个以上的颜色(主要，强调，警告)制作一个有角度的主题，并将这些颜色应用于诸如进度条之类的实体元素.

I want to make an angular theme with more than three colors (primary, accent, warn) and apply those colors to material elements like progress bars and such.

我正在阅读以下材料设计案例研究: https://material. io/design/material-studies/rally.html#color

I was reading this Material design case studies: https://material.io/design/material-studies/rally.html#color

他们使用6种颜色的调色板:

Where they use a palette of 6 colors:

要添加额外的颜色，我想这将是正确的选择吗?

To add the extra colors I imagine that making this will be the correct way to go?

$mat-extra-color-orange: (
 50  : #fff8e5,
 100 : #ffebb0,
 200 : #ffdc78,
 ...
}

但是如果我想在仅接受primary/accent/warn的mat-progress-bar中使用这种额外的颜色怎么办?

But what if I want to use that extra color in, say, mat-progress-bar that only accepts primary/accent/warn?

感谢您的帮助！

推荐答案

直到Angular Material 6.x(我不知道7.x等会发生什么变化)，只有三个主要/重点/警告调色板是在主题内可用.这是非常有限的，但是您可以做一件事使可能有时有用-定义多个主题.

Up to Angular Material 6.x (I don't know what 7.x etc. might change), only the three primary/accent/warn palettes are available within a theme. This is very limiting, but there is one thing you can do that might be useful sometimes - define more than one theme.

其他主题为您提供了更多的主要，重音和警告调色板.然后，您可以根据希望每个组件具有的主色，强调色和警告色，将不同的主题应用于不同的组件. (您可能需要挖掘Angular Material源代码以了解如何执行此操作，但这并不复杂-只需查看

Extra themes give you extra primary, accent, and warn palettes. You can then apply different themes to different components depending on which primary, accent, and warn colors you want each component to have. (You may need to dig in to Angular Material source code to figure out how to do this, but it's not that complicated - just look at what the angular-material-theme mixin does.)

很显然，该没有为您提供每个组件更多的颜色选项，但是它确实允许您在应用程序中使用更多颜色，并为所选组件使用其他颜色.这有点与材料设计"中的主题化概念相反，因此请谨慎使用.

Obviously, this doesn't give you more color options per component, but it does let you use more colors in your application and use alternate colors for selected components. This is sort of against the idea of theming in Material Design, so use cautiously.

例如:

@import '~@angular/material/theming';

$main-theme: mat-light-theme($mat-purple, $mat-yellow, $mat-red);
$alternate-theme: mat-light-theme($mat-deep-purple, $mat-amber, $mat-red);

@include mat-core-theme($main-theme);
@include mat-autocomplete-theme($main-theme);
@include mat-badge-theme($alternate-theme);
...

这篇关于超过3种颜色的角度主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！