A color palette is a defined collection of colors from which interface colors are selected. Angular Material organizes palettes around named roles such as primary, accent, and warn, allowing components to use consistent colors and contrasting text. section 28.3.2 section 2.4.1
Use palettes to coordinate component appearance:
- Select a base palette, such as the indigo, pink, or red palette, containing multiple hues for one color. section 28.3.2
- Define named palettes for primary, accent, and warning states, optionally choosing specific accent hues. section 28.3.2
- Retrieve both a palette’s default color and its default-contrast color so foreground text remains appropriate. section 28.3.2
- Reuse theme background and foreground palettes for states such as disabled controls. section 28.3.2
Applying palettes to a custom button
A custom button can expose a themeColor value such as primary, accent, or warn. SCSS maps each value to a defined palette, applies its default color as the background, and applies the matching default-contrast color to the label. The same component can therefore offer several theme-consistent variants without duplicating the complete style definition.
Listing 28.19. The customButton.component.scss file in the src/app/core folder
@use "@angular/material" as material;
$primary: material.define-palette(material.$indigo-palette);
$accent: material.define-palette(material.$pink-palette, A200, A100, A400);
$warn: material.define-palette(material.$red-palette);
$typography: material.define-typography-config();
button[class*="custom-button-"] {
padding: 7px 12px;
border: none;
border-radius: 4px;
margin: 2px;
}
button.custom-button {
@each $name, $palette in (primary: $primary,
accent: $accent, warn: $warn) {
&-#{$name} {
background-color:
material.get-color-from-palette($palette, default);
color: material.get-color-from-palette($palette,
default-contrast);
font: {
family: material.font-family($typography, button);
size: material.font-size($typography, button);
weight: material.font-weight($typography, button);
}
}
}
}
$bg: material.$light-theme-background-palette;
$fg: material.$light-theme-foreground-palette;
:host[disabled] button[class*="custom-button-"],
button[class*="custom-button-"]:disabled {
background-color:
material.get-color-from-palette($bg, disabled-button);
color: material.get-color-from-palette($fg, disabled-button);
}
Inspect the complete SCSS implementation, including palette definitions, typography configuration, generated button variants, and disabled-state colors. section 28.3.2
