Actualmente estoy aprendiendo a crear mi propio tema de Angular Material 2 usando la documentación ( https://github.com/angular/material2/blob/master/guides/theming.md )
Parece que lo principal es simplemente especificar los colores aquí.
// Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400);No entiendo muy bien lo que hace la paleta de alfombras. Entiendo el primer parámetro que especifica el color. No entiendo por qué hay un color predeterminado, más claro y más oscuro.
Pensé que estos colores deben mostrarse cuando tienes un código como este
<md-toolbar color="primary"> text </md-toolbar>En ese caso, la barra de herramientas debe estar en el color principal. No puedo ver ningún lugar que especifique que también puedo hacerlo más oscuro o más claro. Entonces, ¿para qué se usan los colores predeterminados, más claros y más oscuros?
Mirando _theming.scss tienes la definición mat-palette:
// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms // of the Material Design hues. // @param $color-map // @param $primary // @param $lighter @function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700)Use https://material.io/tools/color para obtener los nombres de los colores y los valores de los parámetros.
En su archivo theme.scss ha definido su tema con:
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); @include angular-material-theme($my-app-theme); Cambie mat-light-theme a mat-dark-theme y su tema utilizará los valores más oscuros de su paleta.
Una paleta de materiales consiste en una gama de colores con diferentes contrastes. Utilizan un sistema numérico como clave para saber qué color utilizar. El 500 es el color predeterminado.
Hay componentes de material que utilizan el valor predeterminado como su color.
background-color: mat-color($palette); color: mat-color($palette, default-contrast);
Esto asignaría el color 500 y el texto de contraste para acompañarlo.
Cuando esté creando la paleta, puede cambiar el valor predeterminado de 500 a A200 cambiando el segundo valor.
$candy-app-accent: mat-palette($mat-pink, A200);
Puede consultar una de mis demostraciones para ver un componente personalizado y una paleta personalizada en acción https://angular-material-waterlooblue.stackblitz.io
Porque así es como la guía de diseño de materiales define los colores. Para angular, no tengo suficiente experiencia para responder correctamente, pero para Android, se usa un color más oscuro para la barra de estado.
Puede encontrar más información ==> https://material.io/guidelines/style/color.html#color-color-system