时间戳

首页 > 解决方案 > Angular Material 深色和浅色主题切换未在整个应用程序中应用

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

问题描述

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

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

轻主题切换

在此处输入图像描述

黑暗主题切换

在此处输入图像描述

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

标签： angularangular-material

解决方案

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

  • 在检查元素中，在深色背景下，我们将按钮视为： .custom-theme .mat-button.mat-warn { color: #f44336; }
  • 在检查元素中，在浅色主题上，我们将按钮视为： .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);

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

推荐阅读