En la paleta, puedo ver el contraste. ¿Cómo puedo elegir un color de contraste?
obras:
scss mat-color($button-primary);No funciona
scss mat-color($button-primary, contrast(900));Ver en la parte inferior dice contraste.
scss $mat-red: ( 50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, 300: #e57373, 400: #ef5350, 500: #f44336, 600: #e53935, 700: #d32f2f, 800: #c62828, 900: #b71c1c, A100: #ff8a80, A200: #ff5252, A400: #ff1744, A700: #d50000, contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: $black-87-opacity, 400: $black-87-opacity, 500: white, 600: white, 700: white, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: white, ) );¿Cómo puedo usar el contraste?
color: mat-contrast($mat-red, 900);Enlace de referencia: https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/core/theming/_theming.scss#L4
Si usa temas personalizados, a veces es útil obtener el contraste de los ajustes preestablecidos predeterminados, más claros o más oscuros. Por ejemplo, en su archivo styles.scss puede configurar el siguiente tema personalizado:
$default-primary: mat-palette($mat-blue, 500, 300, 700); $default-accent: mat-palette($mat-red, 500, 50, 900); $default-warn: mat-palette($mat-deep-orange); $default-theme: mat-light-theme($default-primary, $default-accent, $default-warn); @include my-component-theme($default-theme);Luego, en el tema de su componente puede hacer lo siguiente:
@mixin my-component-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); $background: map-get($theme, background); $foreground: map-get($theme, foreground); .test { color: mat-color($primary, default-contrast); // or 'lighter-contrast' or 'darker-contrast' } }La solucion es:
.test { color: mat-color($button-primary, 900-contrast) }