0

Друзья, пытаюсь кастомизировать тему для Angular Material. Кажется делаю все согласно официальному гайду.

@import "~@angular/material/theming";

$md-editor: (
  50: #e4f6ff,
  100: #bce9ff,
  200: #8fdbff,
  300: #62ccff,
  400: #41c1ff,
  500: #1fb6ff,
  600: #1bafff,
  700: #17a6ff,
  800: #129eff,
  900: #0a8eff,
  A100: #ffffff,
  A200: #f5faff,
  A400: #c2e0ff,
  A700: #a8d4ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #000000,
    600: #000000,
    700: #000000,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

$template-editor-primary: mat-palette($md-editor);
$template-editor-accent: mat-palette($md-editor, A200, A100, A400);
$template-editor-warn: mat-palette($md-editor);
$template-editor-theme: mat-light-theme($template-editor-primary, $template-editor-accent, $template-editor-warn);

@include angular-material-theme($template-editor-theme);
@include mat-core();

Создал вот такой файл theme.scss, добавил его в angular.json, но наблюдаю следующую ситуацию - что то переопределяет мои цвета на mat-deep-purple. введите сюда описание изображения

Почему так происходит я не понимаю, по коду ни каких других определений темы нет. У кого нибудь есть какие нибудь варианты или идеи? Спасибо

1
  • Как оказалась видимо если компонент из другого модуля тоже использует Material, то он может пдобавить дополнительные стили на страницу и повлиять на цвеат в теме. Я пока не нашел решения проблемы, но по крайней мере теперь понятно в чем она сотоит. 11 июн 2020 в 3:34

1 ответ 1

0

Решил проблему с помощью описанной в документации возможности Multiple themes.

Создал новый класс в котором вызвал angular-material-theme. Добавил этот класс для контейнера приложения и overlay.

 // theme.scss
.my-example-theme {
    @include angular-material-theme($my-theme-variable);
 }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.