Темно-светлая тема углового материала не применяется в течение всего приложения

Question

Я реализовал эту тему переключения здесь: StackBlitz

Это почти работает.Темы применяются глобально при переключении, но это не перезаписывает все в приложении.Вот до и после (большая часть пользовательского интерфейса должна была быть размытой):

ОСВЕЩЕННАЯ ТЕМА СМЕЩЕНА

ТЕМНАЯ ТЕМА ЗАВЕРШЕНА

• Красный контур сверху показывает, что элемент управления вводом был переключен на темный.
• Средний красный контур показывает темный фон в группе вкладок.
• Самый нижний красный контур показывает флажки таблицы, переключенные на белый.

Телоприложения также переключается на темный фон, но вы не можете видеть его здесь, поскольку sidnav заполняет это пространство.Другие вопросы по stackoverflow, кажется, испытывают противоположную проблему, которую я имею.Их тело / шрифт / диалоги не меняются, но все мое меняется.Мои диалоги / элементы управления вводом оформлены в темной тематике, но больше ничего нет.У меня такое ощущение, что это связано с настройкой моего sidnav / router.

Answer 1

Выделенный вами стековый блик был полезен, единственной заметной вещью была «базовая кнопка», которая сохраняла красный цвет и не переключала цвета; После расследования мы видим:

• В проверяемом элементе на темном фоне мы видим кнопку как: .custom-theme .mat-button.mat-warn { color: #f44336; }
• В элементе inspect, на light theme, мы видим кнопку как: .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);

Я раздвоил ваш стек , чтобы внести изменения в custom-theme.scss, теперь он имеет желтый цвет для предупреждений о темной / пользовательской теме