Actualmente defino un tema personalizado que termina con algo como:
$my-material-theme: mat.define-light-theme(( color: ( primary: $my-material-primary, accent: $my-material-accent, warn: $my-material-warn, ), typography: $my-material-font )); @include mat.all-component-themes($my-material-theme);Todo funciona correctamente. Aún así, noté que algunos componentes usaban un color de fondo diferente al que usé en la aplicación y después de algunas investigaciones, aunque lo siguiente personalizaría aún más el tema:
$my-material-theme: mat.define-light-theme(( color: ( primary: $my-material-primary, accent: $my-material-accent, warn: $my-material-warn, background: $my-material-background ), typography: $my-material-font )); @include mat.all-component-themes($my-material-theme);, donde obviamente definí la nueva paleta de fondo. Después de la prueba, veo que no funciona, ya que mat.define-light-theme parece estar descartando la clave de fondo internamente y en su lugar usa una interna. No estoy tan familiarizado con Sass o material, y me gustaría poder definir también la clave de fondo introduciendo el menor cambio en mi código, usando la versión actual de Angular Material. Gracias por adelantado.
Acabo de tener el mismo problema. Por lo que vi, el fondo utilizado se genera internamente como dijiste. La única forma que encontré para anularlo es establecer el valor en el mapa devuelto $my-material-theme.
Usar las funciones map set/get es bastante feo, pero con algo como esto puedes anular el valor de fondo, en este ejemplo a "red":
$backgroundColor: red; $color: map.get($my-material-theme, "color"); $colorBackground: map.get($color, "background"); $colorBackground: map.set($colorBackground, "background", $backgroundColor); $color: map.set($color, "background", $colorBackground); $my-material-theme: map.set($my-material-theme, "color", $color);Luego puede usar el tema $my-material-theme modificado de la misma manera que lo hizo:
@include mat.all-component-themes($my-material-theme);Puede usar estas funciones para cambiar cualquier parámetro de fondo o primer plano.
@function theme-background-change($theme, $name, $value) { $modified-theme: $theme; $theme-color: map-get($theme, color); $color-background-palette: map-get($theme-color, background); @if $color-background-palette { $color-background-palette: map-merge($color-background-palette, ($name: $value)); } @if $color-background-palette { $modified-theme: map-merge($modified-theme, (color: (background: $color-background-palette))); } $background-palette: map-get($theme, background); @if $background-palette { $background-palette: map-merge($background-palette,($name: $value)); } @if $background-palette { $modified-theme: map-merge($modified-theme,(background: $background-palette)); } @return $modified-theme; } @function theme-foreground-change($theme, $name, $value) { $modified-theme: $theme; $theme-color: map-get($theme, color); $color-foreground-palette: map-get($theme-color, foreground); @if $color-foreground-palette { $color-foreground-palette: map-merge($color-foreground-palette, ($name: $value)); } @if $color-foreground-palette { $modified-theme: map-merge($modified-theme, (color: (foreground: $color-foreground-palette))); } $foreground-palette: map-get($theme, foreground); @if $foreground-palette { $foreground-palette: map-merge($foreground-palette,($name: $value)); } @if $foreground-palette { $modified-theme: map-merge($modified-theme,(foreground: $foreground-palette)); } @return $modified-theme; }Ejemplo de uso:
$dark-primary: mat-palette($mat-light-blue, 300, 100, 500); $dark-accent: mat-palette($mat-yellow, 400, 300, 600); $dark-warn: mat-palette($mat-red, 400); $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); $dark-theme: theme-background-change($dark-theme, 'body', #101010); $dark-theme: theme-background-change($dark-theme, 'card', #101010); $dark-theme: theme-background-change($dark-theme, 'hover', rgba(white, 0.06));Respuesta modificada de @Renat Gubaev a la nueva estructura scss en el material 13:
@use 'sass:map'; @function theme-background-change($theme, $name, $value) { $modified-theme: $theme; $theme-color: map.get($theme, color); $color-background-palette: map.get($theme-color, background); @if $color-background-palette { $color-background-palette: map.merge( $color-background-palette, ( $name: $value, ) ); } @if $color-background-palette { $modified-theme: map.merge( $modified-theme, ( color: map.merge( $theme-color, ( background: $color-background-palette, ) ), ) ); } $background-palette: map.get($theme, background); @if $background-palette { $background-palette: map.merge( $background-palette, ( $name: $value, ) ); } @if $background-palette { $modified-theme: map.merge( $modified-theme, ( background: $background-palette, ) ); } @return $modified-theme; }