After customizing the theme colors of my Angular Material application, multiple material components lost their background colors such as (MatTooltip, MatSelect, MatDialog etc...)
I followed the Official Guide to customize the theme of my app, and I'm pretty sure I followed everything to the letter, but then this weird bug happened and no suggestion on the internet helped with it.
MatTooltip losing the backgroundColor.
MatSelect losing the backgroundColor._theming.scss:This is the file used for theming the app, I created two themes, light and dark, switchable by class.
@import 'node_modules/@angular/material/theming';
@include mat-core();
$light-primary : mat-palette($mat-blue, 800);
$light-accent : mat-palette($mat-amber, 500);
$light-warn : mat-palette($mat-red, 500);
$light-theme : mat-light-theme((
color: (
primary: $light-primary,
accent: $light-accent,
warn: $light-warn,
)
));
$dark-primary : mat-palette($mat-blue, 800);
$dark-accent : mat-palette($mat-amber, 800);
$dark-warn : mat-palette($mat-red, 800);
$dark-theme : mat-dark-theme((
color: (
primary: $dark-primary,
accent: $dark-accent,
warn: $dark-warn,
)
));
.light-theme {
@include angular-material-theme($light-theme);
}
.dark-theme {
@include angular-material-theme($dark-theme);
}
This file is imported in the global styles.scss. No other theme is imported.
These components have their own styling. Either overwrite them with your own values or unset them:
In template:
<mat-paginator class="background" ... >
</mat-paginator>
Stylesheet:
.background {
background-color: unset;
}
Since this is happening in multiple places in your app and you seem to want to implement a dark-theme, you could also add a class in your styles.scss:
.theme {
@include angular-material-theme($theme-light);
}
.dark-theme {
@include angular-material-theme($theme-dark);
}
And add them conditionaly on a boolean:
[ngClass]="{ 'dark-theme': isDarkTheme }"
or:
[ngClass]="{ isDarkTheme? 'dark-theme' : 'theme' }"
There is a workaround, not pretty but effective:
1- Copy the content of a prebuilt theme (choose a light or dark theme as you wish) from the path node_modules/@angular/material/prebuilt-themes/ into a new scss file.
2- Prepend your color variables to the top of the file
$color-primary : // choose your color
$color-accent : // choose your color
$color-warn : // choose your color
// Default theme below
// ...
3- Using a text editor find and replace the default theme colors with the respective variable:
/*
* If deeppurple-amber theme:
* - Replace #673ab7 with $color-primary.
* - Replace #ffd740 with $color-accent.
* - Replace #f44336 with $color-warn.
* ==================================================
* If indigo-pink theme:
* - Replace #3f51b5 with $color-primary.
* - Replace #ff4081 with $color-accent.
* - Replace #f44336 with $color-warn.
* ==================================================
* If pink-bluegrey theme:
* - Replace #c2185b with $color-primary.
* - Replace #b0bec5 with $color-accent.
* - Replace #f44336 with $color-warn.
* ==================================================
* If purple-green theme:
* - Replace #7b1fa2 with $color-primary.
* - Replace #69f0ae with $color-accent.
* - Replace #f44336 with $color-warn.
* ==================================================
*/
4- Compile and change your theme dynamically by referencing the theme
<head>
...
<link id="theme" rel="stylesheet" href="">
</head>
this.document.getElementById('theme').setAttribute('href', this.chosenThemePath);