Наличие нескольких тем с пользовательскими цветами для Angular Материал и пользовательские компоненты

Question

Мне бы хотелось, чтобы в моем приложении было несколько тем, но наряду с Angular Темы материалов я также хочу определить пользовательские цвета, используемые определенными c компонентами и элементами, которые не являются частью Angular Материал. Всякий раз, когда я меняю тему, эти пользовательские цвета также должны быть изменены. Допустим, у меня есть файл, который определяет цвета для каждой темы, затем я хотел бы импортировать его в произвольный файл s css и использовать цвета для стилизации некоторых элементов

@import "custom-colors"

.my-elem {
 color: $textColor;
}

Затем, если я Мне нужно изменить тему Я бы применил указанный класс c к самому внешнему контейнеру приложения, и после этого я бы хотел, чтобы $textColor имел другое значение, чтобы color из .my-elem изменилось .

Есть ли способ сделать это, не написав что-то вроде

.another-theme {
 .my-elem {
   color: $textColorOfAnotherTheme;
 }
}

В каждом компоненте, на который должно повлиять изменение темы?

Answer 1

Существует 2 способа для изменения тем
1. Добавление родительского класса к вашему root компоненту
2. Изменение имени файла (Как angular материал сделано)

1. Вы можете добавить css с родительским классом (пример ниже)

.light {
 mat-form-field {
  color: white;
 }
 my-custom-element {
 color: white;
 }
}
.dark {
 mat-form-field {
  color: black;
 }
 my-custom-element {
  color: black;
 }
}

и, когда пользователь меняет тему, вы можете изменить класс на элементе root <app-component class="light">

Есть несколько способов сделать это: Иметь глобальную переменную , Используя Event Emitter

2. При изменении имен файлов один и тот же файл без родительского класса будет разделен на light.css и dark.css

, и при изменении темы пользователя вы можете заменить <link ref="stylesheet" href="light.css">

Angular способ сделать это, используя Rendere 2 Set Attribute