В настоящее время я переделываю приложение клубов с Angular 9 на 18, поскольку оно не поддерживается должным образом. Я стараюсь сохранить как можно большую часть интерфейса и поэтому хочу сохранить более или менее тот же дизайн.
Я нашел следующий код, определяющий темы нашего приложения в этом коде:
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($material-primary);
$my-app-accent: mat-palette($mat-pink, 500, 900, A100);
$my-app-warn: mat-palette($mat-red);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
Его можно найти в файле colours.scss, на который есть ссылка в файле styles.scss нашего старого приложения. Я хотел сохранить все это нетронутым, но с момента выхода Angular 17 использование @import больше невозможно, и я должен использовать @use (как в этом билете: https://github.com/angular/comComponents/issues /28204)
Я попробовал изменить код сам и с помощью ChatGPT получилось следующее:
@use '@angular/material' as mat;
@include mat.core();
$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, 500, 900, 'A100');
$my-app-warn: mat.define-palette(mat.$red-palette);
$my-app-theme: mat.define-light-theme((
color: (
primary: $my-app-primary,
accent: $my-app-accent,
warn: $my-app-warn,
)
));
@include mat.all-component-themes($my-app-theme);
К сожалению, это не работает, и я получаю следующую ошибку:
Unknown Function: 'define-palete' ...
Кто-нибудь знает, каков правильный синтаксис? Даже руководства, предоставленные Angular, по-прежнему ссылаются на старую систему: https://v7.material.angular.io/guide/theming
🤔 А знаете ли вы, что...
С помощью CSS можно оптимизировать макет для различных устройств и экранов с помощью медиа-запросов.
Ваше приложение Angular 9 использует Material 2, который больше не используется по умолчанию. Вот правильный синтаксис для Angular Material 18 с использованием Материала 3:
@use '@angular/material' as mat;
@include mat.core();
$my-theme: mat.define-theme((
color: (
theme-type: light,
primary: mat.$violet-palette,
)
));
html {
@include mat.all-component-themes($my-theme);
}
Это может помочь, должен работать с Angular Material 18:
@use '@angular/material' as mat;
@include mat.core();
$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-app-warn: mat.define-palette(mat.$red-palette);
$my-app-theme: mat.define-light-theme((
color: (
primary: $my-app-primary,
accent: $my-app-accent,
warn: $my-app-warn,
)
));
@include mat.all-component-themes($my-app-theme);
Ключевые изменения и пояснения:
Мы используем @use '@angular/material' as mat; для импорта стилей материалов и присваиваем им пространство имен mat.
В определениях палитр используется mat.define-palette(), а доступ к предопределенным палитрам осуществляется через mat.$color-palette.
Для акцентной палитры я использовал стандартные рекомендации Material Design для акцентных цветов (A200, A100, A400). При необходимости вы можете их отрегулировать.
Тема определяется с помощью mat.define-light-theme() со структурой объекта для лучшей читаемости и возможности расширения в будущем.
Наконец, мы включаем все темы компонентов с помощью mat.all-component-themes($my-app-theme).
Дополнительные соображения:
Если вы используете пользовательские цвета, вам может потребоваться определить пользовательские палитры. Например:
$custom-primary: (
50: #e8eaf6,
100: #c5cae9,
// ... other shades
500: #3f51b5, // main shade
// ... continue with other shades
contrast: (
50: rgba(black, 0.87),
100: rgba(black, 0.87),
// ... other contrasts
)
);
$my-app-primary: mat.define-palette($custom-primary);
В Angular 18 с темой M3 функции define-palette() больше нет. Чтобы создать палитру M2, используйте mat.m2-define-palette(). Если вы хотите создать собственную тему M3, используйте схему создания пользовательской темы:
ng generate @angular/material:m3-theme