Después de personalizar los colores del tema de mi aplicación Angular Material, varios componentes de material perdieron sus colores de fondo, como (MatTooltip, MatSelect, MatDialog, etc.)
Seguí la Guía oficial para personalizar el tema de mi aplicación, y estoy bastante seguro de que seguí todo al pie de la letra, pero luego ocurrió este extraño error y ninguna sugerencia en Internet me ayudó.
MatTooltip perdiendo el color de fondo.
MatSelect perdiendo el color de fondo._theming.scss :Este es el archivo que se usa para crear el tema de la aplicación. Creé dos temas, claro y oscuro, intercambiables por clase.
@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); } Este archivo se importa en el archivo global styles.scss . No se importa ningún otro tema.
Estos componentes tienen su propio estilo. O sobreescríbalos con sus propios valores o desactívelos:
En plantilla:
<mat-paginator class="background" ... > </mat-paginator>Hoja de estilo:
.background { background-color: unset; }Dado que esto está sucediendo en varios lugares de su aplicación y parece querer implementar un tema oscuro, también podría agregar una clase en su styles.scss:
.theme { @include angular-material-theme($theme-light); } .dark-theme { @include angular-material-theme($theme-dark); }Y agréguelos condicionalmente en un booleano:
[ngClass]="{ 'dark-theme': isDarkTheme }"o:
[ngClass]="{ isDarkTheme? 'dark-theme' : 'theme' }"Hay una solución, no bonita pero efectiva:
1- Copie el contenido de un tema preconstruido (elija un tema claro u oscuro como desee) desde la ruta node_modules/@angular/material/prebuilt-themes/ en un nuevo archivo scss.
2- Anteponga sus variables de color en la parte superior del archivo
$color-primary : // choose your color $color-accent : // choose your color $color-warn : // choose your color // Default theme below // ...3- Usando un editor de texto, busque y reemplace los colores predeterminados del tema con la variable respectiva:
/* * 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 y cambie su tema dinámicamente haciendo referencia al tema
<head> ... <link id="theme" rel="stylesheet" href=""> </head> this.document.getElementById('theme').setAttribute('href', this.chosenThemePath);