Angular Material 18 mat.define-palette Undefined Function Error

Problem Statement

After upgrading to Angular Material 18, many developers encounter compilation errors in their SCSS files when using mat.define-palette() and related functions. The error occurs because Angular Material 18 introduced breaking changes to its theming API:

X [ERROR] Undefined function.
   ╷
14 │ $myapp-theme-primary: mat.define-palette(mat.$indigo-palette, A400, A100, A700);
   │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

This error appears because:

• Automatic migrations (ng update @angular/material) may not update SCSS files
• The Material Design 2 (M2) theming functions have been renamed with m2- prefixes
• Legacy function names (define-palette, define-light-theme, etc.) were removed in v18

Solution

Angular Material 18 migrated legacy functions to prefixed names to support both M2 and Material Design 3 (M3) systems. To fix the error:

1. Add m2- prefix to all theming functions (define-palette → m2-define-palette)
2. Add m2- prefix to all palette references ($indigo-palette → $m2-indigo-palette)
3. Add m2- prefix to theme definition functions (define-light-theme → m2-define-light-theme)

Version Compatibility

This solution applies specifically to Angular Material 18+. For Angular Material 17 or below, the original unprefixed functions should be used.

Corrected SCSS Implementation

@use '@angular/material' as mat;
@include mat.core();

// Updated with m2- prefixes
$myapp-theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette, A400, A100, A700);
$myapp-theme-accent: mat.m2-define-palette(mat.$m2-indigo-palette);
$myapp-theme-warn: mat.m2-define-palette(mat.$m2-red-palette);

$myapp-theme: mat.m2-define-light-theme((
  color: (
    primary: $myapp-theme-primary,
    accent: $myapp-theme-accent,
    warn: $myapp-theme-warn,
  )
));

@include mat.all-component-themes($myapp-theme);

Key Changes Explained

Original (v17)	Updated (v18+)	Purpose
define-palette()	m2-define-palette()	Create Material Design 2 color palettes
$indigo-palette	$m2-indigo-palette	Prebuilt M2 color palette
define-light-theme()	m2-define-light-theme()	Define M2 theme configuration

Migration Steps

1. Update Angular Material: Ensure you've run ng update @angular/material@18
2. Search and Replace: Globally replace in your SCSS files:
   • mat.define-palette( → mat.m2-define-palette(
   • mat.$*-palette → mat.$m2-*-palette
   • mat.define-light-theme( → mat.m2-define-light-theme(
3. Verify Component Themes: Ensure mat.all-component-themes still references your theme variable

Complete Working Example

// styles.scss for Angular Material 18+
@use '@angular/material' as mat;
@include mat.core();

// M2 palettes with explicit parameters
$primary-palette: mat.m2-define-palette(mat.$m2-indigo-palette, 
  $main: A400,    // Primary shade
  $lighter: A100, // Lighter variant
  $darker: A700   // Darker variant
);
$accent-palette: mat.m2-define-palette(mat.$m2-pink-palette);
$warn-palette: mat.m2-define-palette(mat.$m2-red-palette);

// Define M2 theme
$app-theme: mat.m2-define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $accent-palette,
    warn: $warn-palette
  ),
  typography: mat.m2-define-typography-config(),
  density: 0
));

// Apply theme to components
@include mat.all-component-themes($app-theme);

Material 3 Compatibility

To migrate to Material Design 3, replace m2-* functions with m3-* equivalents and update palette structures:

// MD3 example
$primary: mat.m3-define-palette(mat.$m3-indigo-palette);
$theme: mat.m3-define-theme((color: (primary: $primary)));

Additional Resources

• Official Migration Guide
• Angular Material 18 Release Notes
• Theming Documentation