是的,Angular Material提供了CSS变量,可以用来访问主题颜色。可以在全局样式文件(例如styles.scss)中定义自己的CSS变量并使用它们,也可以直接使用已经定义好的变量。
示例代码:
在styles.scss中定义自定义CSS变量:
@import '~@angular/material/theming';
@include mat-core();
$my-primary-color: mat-color($my-app-primary);
$my-accent-color: mat-color($my-app-accent);
:root {
--my-primary-color: #{$my-primary-color};
--my-accent-color: #{$my-accent-color};
}
在组件样式文件中使用自定义CSS变量:
.my-component {
color: var(--my-primary-color);
background-color: var(--my-accent-color);
}
直接使用Angular Material定义好的CSS变量:
@import '~@angular/material/theming';
@include mat-core();
.my-component {
color: mat-color($mat-blue, 400);
background-color: mat-color($mat-pink, 700);
}