如何使用 angular material 更改深色主题？

Question

我按照angular material的文档做主题。

我有这个：

即使它看起来工作正常，您也可以看到某些项目没有改变：背景、图标...

在我的 themes.scss（进口的很好）中，我有这个：

$themes-map: (
  indigo-pink: (
    primary-base: $mat-indigo,
    accent-base: $mat-pink,
  ),
  deeppurple-amber: (
    primary-base: $mat-deep-purple,
    accent-base: $mat-amber,
  ),
  pink-bluegrey: (
    primary-base: $mat-pink,
    accent-base: $mat-blue-gray,
  ),
  purple-green: (
    primary-base: $mat-purple,
    accent-base: $mat-green,
  )
);

我尝试添加深色主题，例如deeppurple-amber-dark:

deeppurple-amber-dark: (
  primary-base: $mat-deep-purple,
  accent-base: $mat-amber,
),

但是更改主题的菜单背景总是白色，所以我想我更换了基本主题。我试图删除 deeppurple-amber 主题以获取默认主题，但现在我在主题选择器上没有任何内容...

我发现我应该添加 class="mat-app-background"，所以我有这个：

<body class="mat-app-background mat-typography">
  <app-root></app-root>
</body>

但没有任何变化。

我没有使用 mat-sidenav-container 等其他问题参考。我正在使用 mat-toolbar，但仅用于 header，所以我不知道它是否改变了什么。

如何让所有这些都与深色主题兼容？

Here 你可以找到一个工作项目的例子，没有过时的版本。

您可以查看 stackblitz。警告：这无法工作，因为 stackblitz 不从文件导入回购协议。

Answer 1

我在您的代码中看到的问题是您没有按预期使用 Material，您需要使用它提供的布局组件并应用样式。

例如，如果我像这样用 mat-card 包裹路由器插座：

<div class="content" role="main">
    <mat-card> 
         <router-outlet></router-outlet>
    </mat-card>
</div>

如果你只想使用样式而不使用组件，我认为 Material 不是一个好的选择，也许可以尝试一些 CSS 框架，如 bootstrap 或 tailwind。

如何使用 angular material 更改深色主题？

How to change dark theme with angular material?

themes

sass

angular-material

angular