web-dev-qa-db-fra.com

Modification de la couleur primaire en Angular Material 2

J'essaie de changer la couleur primaire par défaut dans Angular Material 2 (alpha 6).

J'ai eu une idée de this doc officiel.

J'ai localisé _default-theme.scss de node_modules > @angular2-material > core > style et a remplacé la couleur turquoise par du violet dans la ligne suivante.

$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);

Mais la couleur turquoise est toujours affichée sur la page et le rose n'apparaît jamais. Qu'est-ce que je rate? Comment puis-je changer la couleur primaire?

(J'utilise Angular Material 2 alpha 6 with Angular 2 RC4)

angularangular-material2
14
duke636

Je viens de surmonter ce problème aujourd'hui ...

Comme le commentaire ci-dessus l'indique, ce n'est pas encore possible officiellement, mais vous pouvez remplacer les couleurs individuellement dans les fichiers sass. C'est un peu de travail mais ça marche très bien.

Ma structure de fichier scss

/scss
--/angular-material
-- _button.scss
-- _checkbox.scss
-- _input.scss
--  //etc
-- angular-material.scss // I @import all angular-material files into this
 main.scss // angular-material is imported into my main scss file...

Par exemple ... mon angular-material/_input.scss ressemble à ceci:

:root md-input {

@extend %typo-base;
padding-top: 1px;

.md-input-placeholder {
  color: $light-grey-color;
}

.md-input-placeholder.md-focused {
  color: $primary-color;
}

.md-input-underline {
  border-color: $light-grey-color;
}

.md-input-underline .md-input-ripple {
  background-color: $primary-color;
}

//...etc
}

Le :root le sélecteur perce le dom des ombres pour remplacer les styles. Les variables de couleur sont importées de mon thème principal dans le angular-material.scss fichier afin qu'ils puissent être utilisés dans n'importe quel fichier de remplacement de matériel.

J'espère que cela t'aides.

0
markstewie