Angular Material深色和浅色主题切换未在整个应用程序中应用

Question

我在此处实现了此主题切换：StackBlitz

几乎可以使用。切换时，主题将全局应用，但不会覆盖应用中的所有内容。这是之前和之后的（大多数UI必须模糊）：

灯光主题已切换

黑暗主题切换

• 顶部的红色轮廓表明输入控件已切换到 黑暗。
• 中间的红色轮廓显示选项卡组上的深色背景。
• 最低的红色轮廓显示表格复选框已切换为白色。

应用程序的主体也切换为深色背景，但是您无法在此处看到它，因为sidnav正在填充该空间。关于stackoverflow的其他问题似乎遇到了与我相反的问题。他们的身体/字体/对话并没有改变，但是我的所有改变。我的对话框/输入控件是深色主题，但几乎没有其他内容。我觉得这与我的sidnav /路由器设置有关。

Answer 1

您提供的堆叠闪电很有帮助，唯一值得注意的是那里的“基本按钮”保持红色，不切换颜色。经调查，我们看到：

• 在检查元素中，在深色背景下，我们看到的按钮为： .custom-theme .mat-button.mat-warn { color: #f44336; }
• 在检查元素中，在 light 主题上，我们将该按钮视为： .light-custom-theme .mat-button.mat-warn { color: #f44336; }
• 在您的 light-custom-theme.scss 中，您将红色定义为警告 $light-custom-theme-warn: mat-palette($mat-red);
• 在您的 custom-theme.scss 中，您还定义了红色作为警告 $light-custom-theme-warn: mat-palette($mat-red);

我forked your stackblitz在custom-theme.scss中进行了更改，它现在以黄色作为针对深色/自定义主题的警告的颜色