Правильный способ делать угловые нематериальные темы приложения

Question

Привет, у меня есть угловое приложение, и я пытаюсь применить их к своему приложению.Я хотел знать, как правильно это сделать.На данный момент я делаю this

Как видите, у меня есть родительский компонент и дочерний компонент.Дочерний компонент использует

`
:host-context( .light-white ) {
  .icon-class {
          color: black;
      }

      .brace {
        color: #fb157f;
      }

      .card p {
        color: black;
      }
}
`

и соответственно применяет тему в дочернем компоненте.Но что это правильный путь.

1. То, как я делаю, когда ребенок использует родительский хост-контекст и соответственно применяет темы.
2. Или глобальная таблица стилей с определенными цветами, значение которых изменяется, когдатема меняется.Если это правильный путь, то как это сделать.Объяснение с примером было бы очень полезно.

Заранее спасибо