Как использовать селекторный контекст для функциональности светлой / темной темы?

Question

Я пытаюсь реализовать функциональность темных и светлых тем в моем первом Angular проекте. Я сделал пример проекта ниже, и он состоит из трех компонентов, один из которых должен иметь следующие стили:

Стили

стили. css

/* not working (1/4) */
app-my-component
{
  background-color: green;
}

my- component.component.s css

/* not working (2/4) */
:host {
  background-color: blue;
}

/* not working (3/4) */
:host-context(.light-theme) :host
{
  background-color: black;
}

/* not working (4/4) */
:host-context(.light-theme) app-my-component
{
  background-color: green;
}

Этот компонент используется внутри компонента приложения:

<app-my-component>loading</app-my-component>

А в index.html у меня есть:

<my-app class="light-theme">
  loading
</my-app>

Пример проекта можно увидеть на StackBlitz и отредактировать на по этой ссылке .

Проблема в том, что ни один из стилей не применяется. Я думаю, что проблема связана с компиляцией проекта. Я читаю эту страницу документации и Просмотр инкапсуляции и Проверка созданных CSS разделов, кажется, что-то подсказывает. Я видел этот вопрос , но у него нет ответов, и комментарии, на мой взгляд, бесполезны.

Спасибо.