Angular 18 自定义主题问题

Question

我正在尝试将一些代码从我的 Angular 16 项目迁移到现在的 Angular 18 更新版本

下面是已实现的内容，我不断收到编译错误

@use '@angular/material' as mat;

// Define custom palettes for NAPSA colors
$napsa-blue: (
  50: #e4e6ec,
  100: #bcc0d0,
  200: #9096b0,
  300: #646b90,
  400: #424c79,
  500: #212c61,
  600: #1d2759,
  700: #18214f,
  800: #141b45,
  900: #0b1033,
  A100: #6e7cff,
  A200: #3b4eff,
  A400: #0820ff,
  A700: #0016ee,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff,
  ),
);

$napsa-orange: (
  50: #fef4e3,
  100: #fee4ba,
  200: #fdd28c,
  300: #fcc05e,
  400: #fbb33c,
  500: #faa519,
  600: #f99d16,
  700: #f99312,
  800: #f88a0e,
  900: #f67908,
  A100: #ffffff,
  A200: #fff4eb,
  A400: #ffd7b8,
  A700: #ffc89f,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #000000,
    600: #000000,
    700: #000000,
    800: #000000,
    900: #000000,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

// Define palettes using the new theming API
$light-primary: mat.define-palette($napsa-blue);
$light-accent: mat.define-palette($napsa-orange);
$dark-primary: mat.define-palette($napsa-blue);
$dark-accent: mat.define-palette($napsa-orange);

// Define themes using mat.createTheme()
$light-theme: mat.create-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent,
    background: mat.define-palette(mat.$grey-palette),
  )
));

$dark-theme: mat.create-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    background: mat.define-palette(mat.$grey-palette, 900),
  ),
  is-dark: true
));

// Apply all component themes for the light theme
@include mat.all-component-themes($light-theme);

这是我不断收到的错误

Undefined function.
   ╷
72 │ $light-primary: mat.define-palette($napsa-blue);
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/napsa.scss 72:17  root stylesheet

./src/napsa.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined function.
   ╷
71 │ $light-primary: mat.define-palette($napsa-blue);
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/napsa.scss 71:17  root stylesheet



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.```

Answer 1

Angular 18 引入了 M3 主题，这也是新的默认主题。如果你想继续使用 M2 主题，你需要在一些 Sass 符号前面加上

m2-

（参见 M2 主题文档）：

@use '@angular/material' as mat;

$light-primary: mat.m2-define-palette($napsa-blue);
$light-accent: mat.m2-define-palette($napsa-orange);
$dark-primary: mat.m2-define-palette($napsa-blue);
$dark-accent: mat.m2-define-palette($napsa-orange);

$light-theme: mat.m2-define-light-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent,
    background: mat.m2-define-palette(mat.$grey-palette),
  )
));

$dark-theme: mat.m2-define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    background: mat.m2-define-palette(mat.$grey-palette, 900),
  ),
));

或者如果您想创建自定义M3主题，您可以运行M3主题创建原理图：

ng generate @angular/material:m3-theme