Angular Material: Components background color became transparent after customizing theme

user_5517465 0
Viewed 655

Issue:

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.

Screenshots:

  • Screenshot of MatTooltip losing the backgroundColor.
  • Screenshot of MatSelect losing the backgroundColor.

The theme file _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.

Version info:

  • Angular Version: 11
  • Angular Material Version: 11
angular-material2 angular-material angular
2 Answers

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' }"
user_123485840

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);
user_55174650
Related