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

Question

我在这里实现了这个主题切换：StackBlitz

它几乎可以工作。切换时主题将全局应用，但不会覆盖应用程序中的所有内容。这是之前和之后（大部分 UI 必须被模糊）：

轻主题切换

黑暗主题切换

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

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

Answer 1

您提供的 stackblitz 很有帮助，唯一值得注意的是那里的“基本按钮”保持红色并且没有切换颜色；经过调查，我们看到：

• 在检查元素中，在深色背景下，我们看到的按钮如下： .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 进行更改，它现在以黄色作为针对深色/自定义主题的警告颜色