要设置Angular Material的主色、强调色和警告色,您可以使用CSS变量或Angular Material的颜色调色板。
/* styles.css */
:root {
--primary-color: #003366; /* 主色 */
--accent-color: #FF6600; /* 强调色 */
--warn-color: #FF0000; /* 警告色 */
}
然后,在Angular组件中使用这些变量:
/* styles.css */
@import '~@angular/material/theming';
$primary-color: mat-palette($mat-indigo);
$accent-color: mat-palette($mat-orange);
$warn-color: mat-palette($mat-red);
$theme: mat-light-theme(
(
color: (
primary: $primary-color,
accent: $accent-color,
warn: $warn-color
)
)
);
@include angular-material-theme($theme);
然后,在Angular组件中使用这些颜色:
这些方法都可以让您轻松修改和自定义Angular Material的主色、强调色和警告色。