在自定义颜色时，可以为它们设置默认的对比度。通常，这可以通过将“default-contrast”设置为“light”或“dark”来实现。

但是，在Angular 12 Material中，这个设置似乎无法正常工作。相反，您需要为每个颜色手动设置对比度。

以下是一个解决方案的代码示例，在此示例中，我们为自定义颜色设置了一个默认的对比度值：

// 在styles.scss @import '~@angular/material/theming';

// 定义主题 $my-theme: mat.defineTheme([ // 设置自定义颜色 $my-app-primary: ( 50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, 300: #e57373, 400: #ef5350, 500: #f44336, 600: #e53935, 700: #d32f2f, 800: #c62828, 900: #b71c1c, contrast: ( // 为light和dark模式分别设置对比度 light: $my-app-primary-contrast-light, dark: $my-app-primary-contrast-dark, ), ), // 其他自定义颜色... ]);

// 在组件中引用主题 @Component({ selector: 'app-my-component', templateUrl: './my-component.html', styleUrls: ['./my-component.scss'], // 引用主题 providers: [{provide: MAT_THEME_OPTIONS, useValue: {theme: $my-theme}}], }) export class MyComponent {}

// 在HTML模板中使用自定义颜色 Click me

在这个示例中，我们为自定义颜色设置了一个命名为“$my-app-primary”的变量，并为其定义了一个名为“contrast”的子级。在这个子级中，我们为浅