liveBook · Manning

Define-palette function

As explained in Pro Angular 16

The Angular Material Sass define-palette function creates a named palette by selecting hues and assigning semantic color roles.

Angular Material’s Sass define-palette function creates a named palette by selecting hues from a base color palette and assigning roles such as default and text. section 28.3.2

Use it to prepare consistent palette roles for themed component styles:

  • Pass a base palette such as material.$indigo-palette. section 28.3.2
  • Retrieve selected colors later with get-color-from-palette using names such as default and default-contrast. section 28.3.2

Define primary, accent, and warning palettes

Set $primary from the indigo base palette, choose explicit accent hues from the pink palette, and create $warn from the red palette.

How Pro Angular 16 covers it

How deep it goes
Explains base palettes, selected hues, semantic names, and later color lookup, but stops short of function internals.
Examples
Demonstrates indigo primary, pink accent with A-series hues, red warning, and custom-button background and contrast colors.
What it assumes
Assumes basic Sass @use and variable syntax while identifying Angular Material base palettes and their hue ranges.
What you can do after
Apply it via Angular Material Sass to define primary, accent, and warning palettes for custom themed components.
How it connects
Connects Sass variables, Angular Material themes, color palettes, hues, and get-color-from-palette.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.