首页 文章

角度主题超过3种颜色

提问于
浏览 次
1

我想制作一个有三种以上颜色（主要，重音，警告）的角度主题，并将这些颜色应用于进度条等材质元素 .

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

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

Rally color palette

为了增加额外的颜色，我想这会是正确的方法吗？

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

但是，如果我想使用那种只接受 primary/accent/warn 的 mat-progress-bar 的额外颜色怎么办？

谢谢你的帮助！

angular angular-material themes

1 回答

  • 0

    直到Angular Material 6.x（我不知道7.x等可能会改变什么），主题中只有三个主要/重音/警告调色板可用 . 这是非常有限的，但有一件事你可以做，有时可能有用 - 定义多个主题 .

    额外的主题为您提供额外的主要，重音和警告调色板 . 然后，您可以将不同的主题应用于不同的组件，具体取决于您希望每个组件具有的主要颜色，重音和警告颜色 . （您可能需要深入了解Angular Material源代码以了解如何执行此操作，但这并不复杂 - 只需查看angular-material-theme mixin的功能 . ）

    显然，这不会为每个组件提供更多颜色选项，但它确实允许您在应用程序中使用更多颜色，并为选定组件使用替代颜色 . 这有点违背材料设计中主题的想法，因此请谨慎使用 .

    例如：

    @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);
...
    回复于

相关问题