Изменение свойств класса CSS на основе выбранной темы (выбранной в пользовательском интерфейсе) в Angular 8

Question

У меня есть приложение Angular 8, тогда как пользователь может переключаться между двумя различными темами в пользовательском интерфейсе. У меня есть класс по div, где я хотел бы, чтобы цвет фона был разным в каждой теме. Но я не могу этого сделать.

Возможно, здесь есть кто-то, кто делал что-то подобное раньше?

Myapp.component.html

<div class="ui-layout">
    <div class="card">
        <div class="wrapper">


        </div>
    </div>
</div>

Myapp.component.scss

.card {
  background-color: #ffffff;
}

.black-blue-theme {
    .card { 
    background-color: #424242 !important;
    }
}

app.component.ts

  ngOnInit() {
        this.componentCssClass = 'light-indigo-theme';
        themes.current('generic.light');
        this.setupOverlayContainer();
        this.subscribeToObservableFooter();

    }

    setupOverlayContainer() {
        const containerElement = this.overlayContainer.getContainerElement();
        if (containerElement) {
            const classList = this.overlayContainer.getContainerElement().classList;
            const toRemove = Array.from(classList).filter((item: string) =>
                item.includes('-theme'),
            );
            classList.remove(...toRemove);
            classList.add(this.componentCssClass);
        }
    }

    changeTheme(type: string) {
        this.componentCssClass = type;
        if (type === 'black-blue-theme') {
            themes.current('generic.dark');
        } else {
            themes.current('generic.light');
        }
        this.setupOverlayContainer();
    }

Answer 1

У вас есть две темы, одна из которых должна использоваться по умолчанию. Хорошо, давайте сделаем что-то подобное.

app.component.ts

currentTheme: string = 'generic.dark';

changeTheme(type: string) {
    this.currentTheme = type;
}

app.component.html

<div class="ui-layout" [ngClass]="currentTheme">
    <div class="card">
        <div class="wrapper">


        </div>
    </div>
</div>

Answer 2

Решил это. Просто нужно отредактировать app.component.scss, а НЕ Myapp.component.scss

app.component.scss

.black-blue-theme {
    .card { 
    background-color: #424242 !important;
    }
}