如何有效地使用 Angular Material 自定义调色板颜色 Angular Material
Posted
技术标签:
【中文标题】如何有效地使用 Angular Material 自定义调色板颜色 Angular Material【英文标题】：How to use Angular Material custom- palette colors effectively Angular Material 【发布时间】：2019-04-04 23:20:01 【问题描述】：我正在使用自定义材质调色板。 使用其默认阴影、深色阴影、浅色阴影定义了主要和重音调色板，如下所示：
$my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
$my-app-accent: mat-palette($md-lightaccent, 500,900,A100);
$my-app-warn: mat-palette($md-warn);
/*finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme function,*/
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
/* and finally include the result of calling the angular-material-theme function with our $my-app-theme.*/
@include angular-material-theme($my-app-theme);
问题：
1. 如果我在代码中使用color="primary" 或color="accent" 而不是设置default 色度，问题是，如何使用lighter 和darker-shades我们已将其用作主题初始设置的一部分。
2. 如何将调色板中的任何其他色调用于primary 或accent 色调。
【问题讨论】：
【参考方案1】：检查我在下面编写的代码。检查注释行的用法
主题.scss
$my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
$my-app-accent: mat-palette($md-lightaccent, 500,900,A100);
$my-app-warn: mat-palette($md-warn);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives light theme
$my-app-dark-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives dark version of the above theme
//apply this class to any element you want to apply dark theme or set class to <body> so apply it to whole site
.dark-theme
@include angular-material-theme($my-app-dark-theme);
@include angular-material-theme($my-app-theme); //default theme
【讨论】：
【参考方案2】：据我所知，没有简单的方法可以通过简单地修改 html 来使用自定义调色板中的非默认阴影（即 <button color="primary-lighter"> 不起作用）。
我发现最简单的方法是在 Theme.scss 文件中包含自定义主题，例如：
$my-accentpalette: ( 50 : #f9f2eb, ... A700 : #ffae71, contrast: ( 50 : #000000, ..., A700 : #000000, ) );
.lighter-style
background-color: mat-color($my-accentpalette, 200);
color: mat-contrast($my-accentpalette, 200);
（注意我刚刚从调色板中选择了“200”条目，选择你想要的任何东西）。然后你可以将样式应用到任何你想要的 HTML 元素：
<button class="lighter-style">
一些我觉得有帮助的支持链接：
How can I use custom theme palettes in Angular? material 2 paletta contrast color【讨论】：
【参考方案3】：我也有类似的材质角度阴影问题。由于我在 web 中找不到解决方案（省略了使用将引用其他主题的类的可能性），我使用了普通的 scss 内置函数，如下所示：
@import "./../../my-theme.scss";
a
color: darken($accent, 30%);
【讨论】：
以上是关于如何有效地使用 Angular Material 自定义调色板颜色 Angular Material的主要内容，如果未能解决你的问题，请参考以下文章
CSS：将 CSS 样式应用于除 Material Angular 之外的所有内容
Angular Material Design - 随屏幕尺寸改变 flex 值
如何在 Angular 6 中使用 Material 将 mat-chip 绑定到 ngmodel
如何在 Angular Material 中创建自定义输入错误