After switching from version 15.0.3 to version 17.0.4 of Angular Material, I get an error when theming, namely when using the background value, there was no such error in 15.0.3 and everything worked correctly.
(status-bar: #e0e0e0, app-bar: #f5f5f5, background: #fafafa, hover: rgba(0, 0, 0, 0.04), card: white, dialog: white, disabled-button: rgba(0, 0, 0, 0.12), raised-button: white, focused-button: rgba(0, 0, 0, 0.12), selected-button: #e0e0e0, selected-disabled-button: #bdbdbd, disabled-button-toggle: #eeeeee, unselected-chip: #e0e0e0, disabled-list-option: #eeeeee, tooltip: #616161) isn't a valid CSS value. ╷ │ $background-color: mat-color($_background, background); │ ^^^^^^^^^^^^ value │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ unknown function treated as plain CSS
When theming, I want to use the background and foreground values to style components, I tried reinstalling @angular/material, clearing the application cache.
It turned out that I was using the outdated @import Class API, which was removed in v17.
To solve this problem, need to replace the mat-color by adding @use '@angular/material' as mat to the top of the file and using mat.get-color-from-palette().