理解 Angular Material m3 中生成的主题

Question

我使用了 Angular Material m3 (v18) 的主题生成器。生成的文件如下所示：

$_palettes: (
  primary: (
    0: #000000,
    10: #001a43,
    20: #002d6c,
...

$_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);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
    // use-system-variables: true,
  ),
  typography: (
    plain-family: 'Roboto, sans-serif',
    brand-family: 'Roboto, sans-serif',
    // use-system-variables: true,
  ),
));

现在我对生成的代码有一些疑问：

1. _primary

   和

   _tertiary

   都包含

   secondary

   、

   neutral

   和

   error

   。这是分配给颜色的。为什么我不能直接分配辅助？
2. 主题内是否有一个地方可以存储不属于调色板的自定义颜色？据我了解，调色板应该是一系列具有不同色调的颜色。
3. 在 m2 中，可以将

   mat-typography

   类设置为 body，因此所有元素都使用正确的字体系列。不知道为什么这已被删除。是否有类似的东西可以确保像 h2、h3... 这样的元素使用我在

   typography

   中分配的字体系列？

Answer 1

如果想直接设置次要集合，可以在主调色板中修改次要集合的颜色。第三级二级调色板被丢弃。

如何在 Angular Material 3 中定义 6 个调色板？

为什么要这样做，是为了简化 Angular 的调色板，或者可能是为了坚持 M3 设计标准。

主题内是否有一个地方可以存储不属于调色板的自定义颜色？据我了解，调色板应该是一系列具有不同色调的颜色。

---

您可以创建自己的自定义 SCSS/CSS 变量并通过应用程序使用它们。

您可能很难从其他组件访问 SCSS 变量，在这种情况下，CSS 变量会更好。

theme

在 m2 中，可以将 mat-typography 类设置为 body，因此所有元素都使用正确的字体系列。不知道为什么这已被删除。是否有类似的东西可以确保像 h2、h3 这样的元素使用我在主题排版中分配的字体系列？

是的，在主题定义上，我们可以选择定义版式，这将在整个应用程序中应用。

:root {
    --some-var: #000000;
}

$some-var: #ffffff

Angular 18 Material 3 字体大小[重复]