Angular Material 提供了一组预定义的颜色变量,可以在样式表中使用。下面是 Angular Material 暗色主题默认使用的颜色代码:
/* 这是 Angular Material 暗色主题中默认使用的颜色代码 */
$mat-dark-theme-background: #303030;
$mat-dark-theme-text: #f1f1f1;
$mat-dark-theme-primary: #80cbc4;
$mat-dark-theme-accent: #ffcc00;
$mat-dark-theme-warn: #ff0000;
可以在自己的样式表中使用这些变量来更改 Angular Material 暗色主题的默认颜色。例如:
/* 自定义暗色主题颜色 */
.my-app-dark-theme {
/* 将背景颜色更改为灰色 */
background-color: $mat-dark-theme-background + #222;
/* 将文本颜色更改为白色 */
color: $mat-dark-theme-text;
/* 将主题颜色更改为红色 */
--mat-primary: #ff0000;
/* 将强调颜色更改为蓝色 */
--mat-accent: #0000ff;
/* 将警告颜色更改为橙色 */
--mat-warn: #ff9900;
}
可以将 .my-app-dark-theme
类应用于 Angular 应用程序的根元素以更改默认颜色。例如:
...
...