Skip to content

feature(client): add custom Angular Material theme

Laurent Bourgon requested to merge client/feature/material-palette into dev

Pour que les composants Angular Material aient une cohérence, il faut utiliser un thème qui définit la couleur principale, d'accent et d'alerte de l'application.

  • Couleur primaire: bleu (#0076E3)
  • Couleur accent: rose (#e30075)
  • Couleur d'alerte: Material Design's red palette

image image

Ajouts

  • Ajout des flags Prettier à la configuration VSCode pour utiliser la configuration du projet lors de Format (et Format on Save).
  • vars.scss qui contient toutes les constantes SCSS du projet.
  • theme.scss qui défini un thème Angular Material selon la couleur primaire (#0076E3) choisie et le générateur Material Design. Le fichier a été ajouté aux styles toujours globaux dans la configuration d'Angular.
  • La couleur de fond du body de l'application est la couleur primaire dans le fichier vars.scss.

Modifications

  • Le fichier styles.scss n'est utilisé que pour donner des styles globaux à l'application.

Conséquences

  • Les composants Angular Material vont suivre le thème défini dans theme.scss.
  • Pour éviter un styles.css compilé énorme, il faut appliquer le thème seulement aux composants utilisés dans l'application. Pour cela, il faut ajouter, dans theme.scss, @include mat.COMPONENTTYPE-theme($theme); à chaque fois qu'un nouveau type de composant est ajouté au projet.

Merge request reports