Блог

Мне было интересно, можно ли изменить три цвета (основной, акцент, предупреждение) для каждого компонента по-разному, без импорта определенной темы.

Итак, в основном у меня есть my-theme.scss файл, в котором все определено (цвета/типографии). В styles.scss теме импортируется, а затем устанавливается в index.html или app.component.html :

 @import "themes/my-theme.scss";

.my-light-theme {
  @include mat.all-component-colors($my-light-theme);
  @include mat.all-component-typographies($my-light-theme);
}

.my-dark-theme {
  @include mat.all-component-colors($my-dark-theme);
  @include mat.all-component-typographies($my-dark-theme);
}
 

Проблема сейчас в том, что я определил четыре разных основных цвета для темы и теперь хочу использовать на себе другой основной цвет header.component , чем тот, который используется по умолчанию. Я мог бы добиться этого, импортировав соответствующую тему и установив в header.component.scss :

 @use 'sass:map';
@use '~@angular/material' as mat;
@import "src/themes/my-theme.scss";

$color-config: mat.get-color-config($my-light-theme);

$primary-palette: map.get($color-config, "primary");
$accent-palette: map.get($color-config, "accent");

.toolbar {
  background: mat.get-color-from-palette($primary-palette, "custom-green") !important;
}
 

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

Я предполагаю, что это невозможно, потому что, если вы используете самостоятельную палитру custom-green , в других ваших темах может не быть нужного цвета.