Установите отключенный текст в Angular Material v15

Я обновляю свое приложение Angular до версии 15. Раньше (в версии 14), чтобы иметь собственный цвет для отключенного текста, я устанавливал свойство отключенного текста в своей пользовательской теме материала, выполнив следующие действия:

      $my-theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);

@function my-mat-light-theme-foreground($color) {
  @return (
    text: var(--color-text-default),
    disabled: var(--color-text-disabled),
    disabled-button: var(--color-text-disabled),
    disabled-text: var(--color-text-disabled),
    divider: rgba(0, 0, 0, 0.12),
    secondary-text: rgba(0, 0, 0, 0.54)
  );
}

$my-foreground: my-mat-light-theme-foreground(mat-color($theme-primary, 700));
$my-app-theme-custom: map-merge($my-theme, (foreground: $my-foreground,);

@include angular-material-theme($my-app-theme-custom);

Однако в версии 15 многое изменилось, и мне пришлось изменить настройки темы следующим образом:

      $my-theme: mat.define-light-theme(
  ( color: (primary: $theme-primary, accent: $theme-accent, warn: $theme-warn,),
    typography: mat.define-typography-config(),)
);

@function my-mat-light-theme-foreground($color) {
  @return (
    text: var(--color-text-default),
    disabled: var(--color-text-disabled),
    disabled-button: var(--color-text-disabled),
    disabled-text: var(--color-text-disabled),
    divider: rgba(0, 0, 0, 0.12),
    secondary-text: rgba(0, 0, 0, 0.54)
  );
}

$my-foreground: my-mat-light-theme-foreground(mat.get-color-from-palette($theme-primary, 700));
$my-app-theme-custom: map-merge($my-theme, (foreground: $my-foreground,));

@include mat.all-component-themes($my-app-theme-custom);
@include mat.all-legacy-component-themes($my-app-theme-custom);

Мой собственный отключенный цвет больше не применяется в версии 15. Я предполагаю, что конфигурация должна была измениться, но я не могу найти подробную информацию о том, что делать, в руководстве ( https://v15.material.angular.io/guide/theming#custom-themes-with-sass ). .

Как реализовать собственные цвета, как в версии 14, для отключенного текста и других перечисленных свойств?

У меня есть примеры этого в stackblitz в v14 (которая работает) и v15 (которая нет). В обоих случаях я делаю отключенный текст оранжевым (это только в демонстрационных целях).
v14: https://stackblitz.com/edit/48sfac
v15: https://stackblitz.com/edit/ichyy

0 ответов

Другие вопросы по тегам