задать боди класс theme-light или theme-dark, а затем в scss сгенерировать соответствующие классы в компоненте, вот только судя по всему из-за инкапсуляции стилей, стили генерируются что-то типа
.theme-light[_ngcontent-c4] .any-class[_ngcontent-c4]
Что можно сделать? Пока очевидно два решения, задать в декораторе @Component encapsulation: ViewEncapsulation.None,
Либо же добавлять класс темы к корню шаблона каждого компонента.
Не то, не другое не очень. Как быть?
Решал ка кто, такую же задачу. Помог Angular Material и и его кастом темы + есть вот такой вариант c :host https://coryrylan.com/blog/theming-angular-apps-with-css-custom-properties
AngularMaterial: 1. Создание темы для компонента (.../header/header-component.theme.scss) 1.1. Импорт переменных 1.2. Создание миксина (принимает $theme, в качестве аргумента) 1.3 Внутри миксина достанем нужные цвета и стилизуем 2. Импорт миксина в styles.scss 2.1. Импорт созданного миксина 2.2. в блоке .my-theme-name{} делаем вызов этого миксина Как можно понять, будет вызван глобальный стиль, что позволит окрашивать изолированные модули. По поводу ng-content-cX - решается с помощью encapsulation: ViewEncapsulation.None
Обсуждают сегодня