Estoy completamente perdido aquí y toda la documentación que puede encontrar aquí o en el medio no parece estar ayudando y parece desactualizada.

Específicamente, estoy tratando de usar @mixins o ajustar partes de los aspectos del tema de los componentes.

En Puedo obtener la tipografía y la paleta de colores para cada componente muy bien.

Sin embargo, si quiero ajustar el primer plano/fondo (no sé cuál es la diferencia), no puedo obtener ningún tipo de resultado esperado.

Mi tema se ajusta a mi paleta personalizada aquí:

 $my-custom-primary: mat.define-palette(alive.$my-custom-palette-primary, 900); $my-custom-accent: mat.define-palette(alive.$my-custom-palette-secondary, 900, A100, A400); // The warn palette is optional (defaults to red). $my-custom-warn: mat.define-palette(mat.$red-palette); $my-theme: mat.define-light-theme(( color: ( primary: $my-custom-primary, accent: $my-custom-accent, warn: $my-custom-warn, ) ));

Eso funciona y puedo ajustar cada tema con color y tipografía.

Sin embargo, el primer plano para la luz y la oscuridad no tiene absolutamente ningún ajuste de mi paleta o la paleta real en el módulo de material. Nada de lo que hago ajusta los colores reales de primer plano/fondo

Lo extraño es que el tema dice que para definir el primer plano y el fondo de la paleta sugiere que la configuración provendría de mi paleta personalizada

 // node_modules/@angular/material/core/theming/_theming.scss @function _mat-create-light-color-config($primary, $accent, $warn: null) { @return ( primary: $primary, accent: $accent, warn: if($warn != null, $warn, define-palette(palette.$red-palette)), is-dark: false, foreground: palette.$light-theme-foreground-palette, background: palette.$light-theme-background-palette, ); }

Lo que quiero poder hacer es cambiar el color de mi botón de desactivación:

 // none of this does anything in my palette or materials palette $light-theme-background-palette: ( status-bar: map.get($grey-palette, 300), app-bar: map.get($grey-palette, 100), background: map.get($grey-palette, 50), hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX card: white, dialog: white, disabled-button: rgba(black, 0.12), raised-button: white, focused-button: $dark-focused, selected-button: map.get($grey-palette, 300), selected-disabled-button: map.get($grey-palette, 400), disabled-button-toggle: map.get($grey-palette, 200), unselected-chip: map.get($grey-palette, 300), disabled-list-option: map.get($grey-palette, 200), tooltip: map.get($grey-palette, 700), );

No sé, simplemente estoy perdido. A punto de ir por el css jajaja.