Как создаются угловые готовые темы? - PullRequest
Новая
       10

Как создаются угловые готовые темы?

0 голосов
/ 06 декабря 2018

Я смотрю на Руководство по темам

. Оно информирует меня о наличии нескольких готовых тем:

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'; - это одна.

Откуда эти темы?

Моя проблема связана с попыткой создать собственную тему.Если, например, я следую за превосходным angular-ngrx-material-starter black-theme.scss , то мне кажется, что я не определяю достаточно цветов.Мой mat-select не имеет стиля.

Мне нужно добавить одну из предварительно созданных тем выше, чтобы получить полную тему, но теперь у меня есть пурпурные цвета в моей теме и общее несовпадение цветов, которые я не хочу.Очевидно, мне не хватает всего спектра цветов в моей теме.

Я чувствую, что если бы я мог видеть «источник» предварительно созданной темы, у меня могла бы быть некоторая идея, как сделать свою собственную.

Кто-нибудь сможет пролить свет на это для меня?

1 Ответ

0 голосов
/ 12 декабря 2018

Ответ Shot

Ответьте за вас, если ваш угловой проект использует scss.Цвета наверняка есть, если вы используете нёбо по умолчанию из модуля углового материала, как в примере, который вы дали выше.Вы, вероятно, просто не добавили оверлейные темы.Выбор матов - это оверлей

На вашем основном

main.scss

@import '../node_modules/@angular/material/theming';

$anms-black-primary: mat-palette($mat-grey, 700, 300, 900);
$anms-black-accent: mat-palette($mat-blue-grey, 400);
$anms-black-warn: mat-palette($mat-red, 500);

$anms-black-theme: mat-dark-theme(
    $anms-black-primary,
    $anms-black-accent,
    $anms-black-warn
);
@include angular-material-theme($anms-black-theme);
.whatever-theme {
  @include angular-material-theme($anms-black-theme);
}

app.component.ts

export class AppComponent {
  constructor(overlayContainer: OverlayContainer) {
    overlayContainer.getContainerElement().classList.add('whatever-theme');
  }
}

Готовые темы только что сгенерированысоставив файл scss.Большинство переменных и функций темы находятся в node_modules/@angular/material/_theme.scss

Пример $(npm bin)/node-sass $FILE > $DEST_PATH/$BASENAME.css

Длинный ответ

Для пониманияТемы в angular Вы должны иметь базовое представление о scss, который является стандартным способом создания тем в angular.

https://sass-lang.com/guide

Чтобы иметь хороший пример стиля scss под правильным угломПроектом будет материал репо материалов.https://github.com/angular/material.angular.io.

В node_modules/@angular/material/_theming.scss вы можете увидеть, как определяются переменные темы, и самостоятельно определять собственные темы.

Хороший ответ для создания пользовательских тем.

Как использовать пользовательские палитры тем в Angular?

...