Between @angular/material versions 15 - 17.2.1, some components hadn't been using contrast colours specified in custom palettes. These being:
- Buttons
- Flat
- Raised
- Fab
- Mini fab
- Slide toggle
- Checkbox
- Datepicker
This is based on the issue (bug(button): Palette contrast values are not applied · Issue #26056 · angular/components (github.com)).
As of @angular/material 17.2.2 this issue has been closed, and contrast issues fixed for buttons, checkboxes, and datepickers. The slide toggle issue remains, but this is working as prior to @angular/material 15, so this remains in case the altered behaviour is your personal preference.
- Install the package with
npm install angular-material-contrast-fix - Import into your theming file with
@use 'angular-material-contrast-fix' - After including component themes/colors for angular material with your custom palettes, include the additional styles provided. E.g.
@include mat.all-component-themes($my-custom-theme);
@include angular-material-contrast-fix.all-component-themes($my-custom-theme);
- There are additional mixins provided if you only want to import specific styles, rather than all of them:
| Mixin | Components | Notes on version |
|---|---|---|
| all-component-themes | All the components below | - |
| button-theme | Buttons | Depreciated as of 17.2.2, to be removed in 18 |
| slide-toggle-theme | Side toggle | - |
| checkbox-theme | Checkbox | Depreciated as of 17.2.2, to be removed in 18 |
| datepicker-theme | Datepicker | Depreciated as of 17.2.2, to be removed in 18 |
- For more help, have a look at the demo app on the github page
- Alternatively to using npm, just go to the github page and copy the styles
| @angular/material version | angular-material-contrast-fix version | Reason |
|---|---|---|
| 15, 16 | 15, 16 | - |
| 17.0.0 - 17.2.1 | 17.2.1 | Switches to use new get-theme-color mixin available in @angular/material 17 |
| 17.2.2 - * | 17.2.2 - * | Existing issue has been fixed in @angular/material for buttons, checkboxes and datepickers. The slide toggle issue remains, but this is working as prior to @angular/material 15, so this remains in case the altered behaviour is your personal preference. |