Angular 18 中的 Angular 自定义材质主题的颜色不可见

Question

我在 Angular Material 3、Angular 18 中创建了一个自定义主题 但主题没有得到应用。

最初我导入主题然后应用，但这不起作用，所以我复制了主文件中的所有调色板，但仍然不起作用......

我将不胜感激任何帮助，谢谢！

它要求我添加更多文字！！

我在 Angular Material 3、Angular 18 中创建了一个自定义主题 但主题没有得到应用。

最初我导入主题然后应用，但这不起作用，所以我复制了主文件中的所有调色板，但仍然不起作用......

我将不胜感激任何帮助，谢谢！

src/styles.scss：

@use "sass:map";
@use "@angular/material" as mat;

@include mat.core();

$_palettes: (
  primary: (
    0: #000000,
    10: #291428,
    20: #3f293d,
    25: #4b3449,
    30: #573f54,
    35: #644a60,
    40: #70566d,
    50: #8b6e86,
    60: #a588a0,
    70: #c1a2bb,
    80: #debdd7,
    90: #fbd8f4,
    95: #ffebf8,
    98: #fff7fa,
    99: #fffbff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #181e00,
    20: #2b3400,
    25: #354000,
    30: #3f4c01,
    35: #4b580e,
    40: #57641a,
    50: #6f7e31,
    60: #889848,
    70: #a3b360,
    80: #becf78,
    90: #daeb91,
    95: #e8f99e,
    98: #f5ffc4,
    99: #fbffdf,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #3a0a00,
    20: #5f1600,
    25: #721c00,
    30: #862300,
    35: #992b03,
    40: #aa3710,
    50: #cb4f27,
    60: #ed673e,
    70: #ff8b68,
    80: #ffb59f,
    90: #ffdbd1,
    95: #ffede8,
    98: #fff8f6,
    99: #fffbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    4: #020d00,
    6: #031400,
    10: #052100,
    12: #072600,
    17: #0b3200,
    20: #0d3900,
    22: #0f3e00,
    24: #114300,
    25: #124500,
    30: #175200,
    35: #1c5f00,
    40: #216d00,
    50: #308909,
    60: #4ba429,
    70: #65c042,
    80: #80dc5b,
    87: #93f16c,
    90: #9bfa74,
    92: #affc8d,
    94: #c2fea6,
    95: #ccffb2,
    96: #d7ffc1,
    98: #edffdf,
    99: #f7ffed,
    100: #ffffff,
  ),
  neutral-variant: (
    0: #000000,
    10: #201a1f,
    20: #352e34,
    25: #41393f,
    30: #4c444a,
    35: #585056,
    40: #655c62,
    50: #7e747b,
    60: #988e94,
    70: #b3a8af,
    80: #cfc3ca,
    90: #ecdfe6,
    95: #faedf4,
    98: #fff7fa,
    99: #fffbff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);


$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes, neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

// Define the theme object.
$budgetify-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: $_primary,
      tertiary: $_tertiary,
      use-system-variables: true,
    ),
    density: (
      scale: 0,
    ),
  )
);

:root {
  @include mat.all-component-themes($budgetify-theme);
}

@include mat.color-variants-backwards-compatibility($budgetify-theme);

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

看起来

use-system-variables

中有一个错误，你可以取消注释这一行，你的主题应该可以正常工作。

请使用此演示 stackblitz 在他们的 github 上提出错误，以便尽快修复。

// Define the theme object.
$budgetify-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: $_primary,
      tertiary: $_tertiary,
      // use-system-variables: true, // <- uncomment this to see the bug.
    ),
    density: (
      scale: 0,
    ),
  )
);

---

Stackblitz 演示