Пользовательская тема для Angular 19 ⇐ CSS

[Anonymous]

Я пытаюсь создать собственную тему для своего приложения Angular 19.
В моем файле theme.scss с использованием встроенных тем работает следующее:

Код: Выделить всё

@use '@angular/material' as mat;

$primary-palatte: mat.$green-palette;
$tertiary-pallate: mat.$red-palette;

html {
@include mat.theme(( color: ( primary: $primary-palatte, tertiary: $tertiary-pallate, theme-type: light, ), typography: Roboto, density: 0 ));
}

Теперь я хочу заменить $primary-palette своей собственной палитрой вместо встроенной (mat.$green-palette). Но когда я пробую это:

Код: Выделить всё

@use '@angular/material' as mat;

$primary-palatte: ( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, );
$tertiary-pallate: mat.$red-palette;

html {
@include mat.theme(( color: ( primary: $primary-palatte, tertiary: $tertiary-pallate, theme-type: light, ), typography: Roboto, density: 0 ));
}

Я получаю сообщение об ошибке, сообщающее, что $primary-palatte не является допустимой палитрой M3. Я немного покопался, и мне предложили попробовать:

Код: Выделить всё

$primary-palatte: mat.define-palette(( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, ));

Но это привело к ошибке компиляции, в которой говорилось, что define-palette не определен.
Почему «define-palette» не определен?
Где можно найти список допустимых «матов». функции? (Я использую Visual Studio 2022, и она не дает мне никаких интеллектуальных возможностей.)
Как еще я могу создать действительную палитру M3 из того, что у меня есть?
Будем очень благодарны за любую помощь.
Спасибо,
Джон

Подробнее здесь: https://stackoverflow.com/questions/793 ... angular-19