Question

我正在为Angular 4应用程序使用Angular Material 2主题。我在theme.scss

中创建了以下主题

@import '~@angular/material/theming';
@include mat-core();

$primary-color: mat-palette($mat-grey);
$accent-color: mat-palette($mat-blue, 500, 900, A100);
$warning-color: mat-palette($mat-red);

$dark-theme: mat-dark-theme($primary-color, $accent-color, $warning-color);
$light-theme: mat-light-theme($primary-color, $accent-color, $warning-color);

在我的style.scss中，我有以下

@import 'theme.scss';

.dark-theme {
    @include angular-material-theme($dark-theme);
}

.light-theme {
    @include angular-material-theme($light-theme);
}

在我的HTML中，我已经对黑暗主题进行了硬编码（最终我想让用户选择选择其中一种 - 暗或亮）

<body class="dark-theme">
    <app-root></app-root>
</body>

但是当我运行应用程序时，我看不到我期望看到的深色。例如，如果我检查了body元素，我根本看不到任何样式。或者，如果我添加一个h1元素，则没有设置样式。我期望身体标签内的所有元素都将遵循主题的颜色。那不是这样吗？我应该明确提到我的非垫元素需要具有哪些颜色？

我认为引导不正确。因为当我使用如下所示的mat组件时，主题将应用于该组件 - 但整体背景仍然没有设置，因此是白色的。

<mat-drawer-container class="example-container">
    <mat-drawer mode="side" opened="true">{{title}}</mat-drawer>
    <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

另外，如果我想从我正在使用的调色板中应用不同的颜色，除了主要颜色，重音符号或警告颜色，该怎么办？如何设置和使用它们？

我对这个概念完全陌生，现在才开始了解上面代码的作用。非常感谢任何帮助。

Answer 1

我认为这是您所缺少的：

最后，如果您的应用程序内容未放置在mat-sidenav-container元素内，则需要将mat-app-background类添加到包装器元素（例如body）中。这样可以确保将正确的主题背景应用于您的页面。

source

如果您要应用调色板中的其他颜色，则可以使用this guide覆盖的混合包

如何将Angular Material主题应用于非材质组件？

1 个答案: