Всем привет, подскажите кто работает с angular material, как вы получаете цвет с установленной темы (если есть светлая и темная тема) в своих кастомных компонентах.

Появилась следующая задача - создал свой компонент, написал в нём стиль:
 .main {
   &-name {
     color: mat-color($primary);
   }
}

Хочу так использовать: <span class="main-name">My Super Text</span>

И ожидаю что когда я меняю тему со светлой на темную то и цвет текста будет меняться. Но вот в чем вопрос, как получить primary color? Нашел следюущее решение - https://github.com/angular/components/issues/9069#issuecomment-477547181 , но оно не подходит (SassError: This file is already being loaded.), ошибку получаю когда подключаю scss из своего компонента @import "src/app/app.component"; в themes.scss, собственно хочу понять как правильно реализовать данную логику, может кто подсказать?

Подскажите плиз кто знает, вопрос про темизацию в angular material

Спасибо, но я читал это и вникал, и не только этот гайд, но я либо окончательно ослеп, либо я не нашел как получать цвета с темы для своего кастомного компонента если тем несколько, в примерах есть только с одной темой, что и так понятно

Вот так https://t.me/angular_fox/271

Спасибо, но я читал это и вникал, и не только этот гайд, но я либо окончательно ослеп, либо я не нашел как получать цвета с темы для своего кастомного компонента если тем несколько, в примерах есть только с одной темой, что и так понятно

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

@mixin theme-card($theme) {
    $foreground-theme: map-get($theme, foreground);
    $background-theme: map-get($theme, background);

    $card-bg: map-get($background-theme, dialog);
    $divider: map-get($foreground-theme, divider);
    $text: map-get($foreground-theme, elevation);

    .home-content {
        background-color: $card-bg;
    }

    .card {
        background-color: $card-bg;

        &__title {
            font-size: $font_size_xl;
            line-height: $font_line_height_xl;
            font-weight: $fw_bold;
            color: $text;
        }
    }
}

Привет
Есть вопрос  насчет renderer

const div = this.renderer2.createElement('div');
        this.renderer2.appendChild(event.picker.container[0], div);

То так все норм и все работает, но есть ли способ что бы вместо 'div' создавался компонент, то бишь

const timeZone = this.renderer2.createElement('app-component-timezone');
        this.renderer2.appendChild(event.picker.container[0], timeZone);

Возможно ли так сделать?

Привет
Есть вопрос  насчет renderer

const div = this.renderer2.createElement('div');
        this.renderer2.appendChild(event.picker.container[0], div);

То так все норм и все работает, но есть ли способ что бы вместо 'div' создавался компонент, то бишь

const timeZone = this.renderer2.createElement('app-component-timezone');
        this.renderer2.appendChild(event.picker.container[0], timeZone);

Возможно ли так сделать?

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

@mixin theme-card($theme) {
    $foreground-theme: map-get($theme, foreground);
    $background-theme: map-get($theme, background);

    $card-bg: map-get($background-theme, dialog);
    $divider: map-get($foreground-theme, divider);
    $text: map-get($foreground-theme, elevation);

    .home-content {
        background-color: $card-bg;
    }

    .card {
        background-color: $card-bg;

        &__title {
            font-size: $font_size_xl;
            line-height: $font_line_height_xl;
            font-weight: $fw_bold;
            color: $text;
        }
    }
}

Спасибо, мне вот единственное не понятно, получается я должен инклюдить данный миксин в файл со стилями (themes.scss), где я определяю светлую и темную тему, и так для каждого компонента выходит

Спасибо, мне вот единственное не понятно, получается я должен инклюдить данный миксин в файл со стилями (themes.scss), где я определяю светлую и темную тему, и так для каждого компонента выходит

Да, https://www.webdraftt.com/tutorial/dynamic-components

И ещё у меня ошибка в таком случае вываливается, что данный scss уже загружен

const timeZone = this.componentFactoryResolver.resolveComponentFactory(DefaultTimezoneComponent);
       event.picker.container[0].viewContainerRef.createComponent(timeZone);
Это так работает или вообще не так??