использование host-context для выбора дочерних классов

Question

Как я могу использовать host-context, чтобы я мог тему child classes соответственно?

<app-root _nghost-fyd-c0="" ng-version="8.2.14" class="desktop-theme">
   <div _ngcontent-fyd-c0="" class="container">
      <app-header _ngcontent-fyd-c0="" _nghost-fyd-c1="">
         <p _ngcontent-fyd-c1="">header works!</p>
      </app-header>
      <div _ngcontent-fyd-c0="" class="app-home">
         <p _ngcontent-fyd-c0="">This is body content</p>
      </div>
      <app-footer _ngcontent-fyd-c0="" _nghost-fyd-c2="">
         <p _ngcontent-fyd-c2="">footer works!</p>
      </app-footer>
   </div>
</app-root>

Я хочу использовать что-то вроде этого. Когда разрешение меняется, приложение- root класс другой темы применяется динамически, так что я могу выбрать тему соответственно и применить внутренние стили.

Ниже не работает.

.desktop-theme .app-home {
   apply styles here
}

:host-context(.desktop-theme) .app-home {
   apply styles here
}