Angular 19自定义Material主题中lighten()函数弃用问题求助

解决方案 #

核心问题说明

弃用警告是因为Sass已废弃全局的lighten()/darken()函数，转而推荐使用模块化的颜色函数；而报错是因为你未显式引入Sass官方的color模块，导致无法识别color.adjust这类新函数。

具体修复步骤

1. 引入Sass color模块
   在你的theme.scss顶部添加模块引入，和Angular Material的引入放在一起：

@use 'sass:color' as color;
@use '@angular/material' as mat;

2. 替换所有弃用函数
   将代码中所有lighten()和darken()替换为对应的模块化函数：

• lighten($color, 20%) → color.adjust($color, $lightness: 20%)（线性提升亮度，和原lighten行为完全一致）
• darken($color, 20%) → color.adjust($color, $lightness: -20%)（线性降低亮度，对应原darken）

修改后的完整关键代码

@use 'sass:color' as color;
@use '@angular/material' as mat;

// Base Material styles
@include mat.core();

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;
$dark-focused: rgba(black, 0.12);

// ... 原调色板定义代码保持不变 ...

// Define light background
$light-background: #f5f5f5;

// Light theme background settings（替换所有lighten/darken）
$mat-light-theme-background: (
  background: $light-background,
  status-bar: color.adjust($light-background, $lightness: -20%),
  app-bar: color.adjust($light-background, $lightness: -5%),
  hover: rgba(#2c2c2c, 0.04),
  card: color.adjust($light-background, $lightness: 5%),
  dialog: color.adjust($light-background, $lightness: 5%),
  tooltip: color.adjust(#2c2c2c, $lightness: 20%),
  disabled-button: rgba(#2c2c2c, 0.12),
  raised-button: red,
  focused-button: $dark-focused,
  selected-button: color.adjust($light-background, $lightness: -20%),
  selected-disabled-button: color.adjust($light-background, $lightness: -30%),
  disabled-button-toggle: color.adjust($light-background, $lightness: -10%),
  unselected-chip: color.adjust($light-background, $lightness: -10%),
  disabled-list-option: color.adjust($light-background, $lightness: -10%),
);

// ... 原主题定义代码保持不变 ...

补充提示

如果想用警告里推荐的color.scale替代，语法为color.scale($color, $lightness: 24.17%)，但color.adjust是线性调整亮度，和原lighten的行为更匹配，适合直接替换迁移。

内容的提问来源于stack exchange，提问作者rami-sf