我正在使用有角度的材料,并且对主题有点迷失。我正在使用预构建的靛蓝粉红色主题,该主题包含在我的 styles.scss 中,如下所示
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
根据文档,我创建了一个名为 theme.scss 的新文件,并将其包含在 styles.scss 之后的 angular.json 中。 theme.scss 如下所示
@import '~@angular/material/theming';
@include mat-core();
$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);
@include angular-material-theme($sg-app-theme);
我的要求 我只需要将默认字体颜色更改为白色而不是黑色。我根本不需要改变任何其他事情。我只是从示例中复制了主要调色板和强调调色板。所以感觉甚至不需要改变。
我相信这篇文章回答了您的问题:https://stackoverflow.com/a/46157803/10730815。基本上,您需要构建自定义前景图并将其合并到您的主题中。将您的代码片段与上面帖子中的代码片段结合起来,将为您的 styles.scss 提供类似的内容:
@import '~@angular/material/theming';
@include mat-core();
$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);
@function my-mat-light-theme-foreground($color) {
@return (
base: $color,
divider: $white-12-opacity,
dividers: $white-12-opacity,
disabled: rgba($color, 0.38),
disabled-button: rgba($color, 0.38),
disabled-text: rgba($color, 0.38),
hint-text: rgba($color, 0.38),
secondary-text: rgba($color, 0.54),
icon: rgba($color, 0.54),
icons: rgba($color, 0.54),
text: rgba($color, 0.87),
slider-off: rgba($color, 0.26),
slider-off-active: rgba($color, 0.38),
slider-min: rgba($color, 0.38)
);
};
$white-foreground: my-mat-light-theme-foreground(white);
$my-app-theme-custom: map-merge($sg-app-theme, (foreground: $white-foreground));
@include angular-material-theme($my-app-theme-custom);
/* For the non-Angular Material items */
body {
color: white;
}
有一些实用功能,您可以仅传入一些必要的调色板,例如主色、强调色和警告色,它将包括背景色和前景色。
这些函数也可以在 Angular 材质文件提供的 scss 中找到,如果导入,则可以在创建主题配置时使用。
此处它们仅供参考,以便您可以看到它们如何自动包含浅色和深色主题的前景和背景。他们的作品太棒了。
@function _mat-create-light-color-config($primary, $accent, $warn: null) {
@return (
primary: $primary,
accent: $accent,
warn: if($warn != null, $warn, mat-palette($mat-red)),
is-dark: false,
foreground: $mat-light-theme-foreground,
background: $mat-light-theme-background,
);
}
@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
@return (
primary: $primary,
accent: $accent,
warn: if($warn != null, $warn, mat-palette($mat-red)),
is-dark: true,
foreground: $mat-dark-theme-foreground,
background: $mat-dark-theme-background,
);
}
这是对我来说 Angular 15 有用且没有自定义函数的方法。
@use '@angular/material' as mat;
...
$newFontColor: green;
// Get color param from our theme
$palette-color : map-get($mat-indigo, color);
// Get background param from color param
$foreground: map-get($palette-color, foreground);
$foreground: map_merge($foreground, (text: $newFontColor);
// Set foreground param for palette
$palette-color: map_merge($palette-color, (foreground: $foreground));
// Set palette for theme
$light-theme: map_merge($light-theme, (color: $palette-color));
@include mat.all-component-themes($light-theme);
这篇文章帮助我把事情拼凑起来。