web-dev-qa-db-fra.com

Thème Angular Material2 - comment définir l’arrière-plan de l’application?

Je construis une application angular2 en utilisant un matériau angulaire2. J'essaie de définir le fond de mon application "de la bonne manière", mais je ne peux pas comprendre comment.

J'ai trouvé une classe que je peux utiliser sur mon élément <body>: mat-app-background que je peux ajouter, qui me donne une couleur par défaut (selon que j'utilise les thèmes clair ou foncé).

Je souhaite définir cette couleur de fond pour utiliser la couleur de ma marque, mais je ne vois pas comment le faire.

Dans _theming.scss, il est défini comme suit:

// Mixin that renders all of the core styles that depend on the theme.
@mixin mat-core-theme($theme) {
  @include mat-ripple-theme($theme);
  @include mat-option-theme($theme);
  @include mat-pseudo-checkbox-theme($theme);

  // Wrapper element that provides the theme background when the
  // user's content isn't inside of a `md-sidenav-container`.
  .mat-app-background {
    $background: map-get($theme, background);
    background-color: mat-color($background, background);
  }
  ...
}

J'ai donc pensé qu'il serait logique d'essayer d'ajouter la couleur de fond à mon thème personnalisé, mais je ne comprenais pas comment le faire.

Sur la documentation Material2 theming , il est uniquement indiqué:

"Dans Angular Material, un thème est créé en composant plusieurs palettes. En particulier, un thème est constitué de:

  • Une palette principale: couleurs les plus largement utilisées sur tous les écrans et composants.
  • Une palette d'accent: couleurs utilisées pour le bouton d'action flottante et les éléments interactifs.
  • Une palette d'avertissement: couleurs utilisées pour transmettre l'état d'erreur. 
  • Une palette de premier plan: couleurs pour le texte et les icônes.
  • Une palette d'arrière-plan: couleurs utilisées pour les arrière-plans d'éléments . "

Comment puis-je ajouter mon fond au thème, ou le faire d'une autre manière?

angularangular-material2
19
Narxx

Si vous souhaitez modifier la couleur d'arrière-plan du thème pour l'ensemble de l'application, vous pouvez remplacer votre thème par ce qui suit.

// Set custom background color
$custom-background-color: map_get($mat-blue-grey, 50);

// -or- Can set colour by hex value too
$custom-background-color: #628cc9;

$background: map-get($theme, background);
$background: map_merge($background, (background: $custom-background-color));
$theme: map_merge($theme, (background: $background));

Cela suppose que vous avez déjà configuré votre $theme en utilisant mat-light-theme ou mat-dark-theme. Bien sûr, vous pouvez remplacer $mat-blue-grey par une carte de couleur de votre choix.

Voici un exemple complet de la façon dont je l’utilise. J'ai les éléments suivants dans un fichier appelé theme.scss, qui est inclus dans mon entrée "styles" angular.json:

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core;

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: mat-palette($mat-red, 600, 400, 900);
$accent: mat-palette($mat-blue-grey, 500, 200, 700);
$background-color: map_get($mat-blue-grey, 50);

// The warn palette is optional (defaults to red).
$warn: mat-palette($mat-blue);

// Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

// Insert custom background color
$background: map-get($theme, background);
$background: map_merge($background, (background: $background-color));
$theme: map_merge($theme, (background: $background));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);
@include my-app-theme($theme);
26
Jake Stoeffler

Si vous souhaitez définir les couleurs d'arrière-plan, vous voudrez probablement personnaliser l'intégralité de la palette arrière-plan et avant-plan en émulant les fonctions mat-light-theme ou mat-dark-theme avec votre propre remplacement. Votre remplaçant inclurait vos propres palettes au lieu des palettes /mat-light-theme-foreground et background.

exemple: https://stackblitz.com/edit/angular-material-custom-background?file=theme.scss

Je ne sais pas si cette méthode est recommandée ou officiellement prise en charge.

9
Benjamin Kindle

voir: thème de la palette scss sur github Angular (2) Material (2)

Extrait du code:

// Background palette for light themes.
$mat-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: $black-12-opacity,
  raised-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
);

// Background palette for dark themes.
$mat-dark-theme-background: (
  status-bar: black,
  app-bar:    map_get($mat-grey, 900),
  background: #303030,
  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
  card:       map_get($mat-grey, 800),
  dialog:     map_get($mat-grey, 800),
  disabled-button: $white-12-opacity,
  raised-button: map-get($mat-grey, 800),
  focused-button: $white-6-opacity,
  selected-button: map_get($mat-grey, 900),
  selected-disabled-button: map_get($mat-grey, 800),
  disabled-button-toggle: map_get($mat-grey, 1000),
);

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:              black,
  divider:           $black-12-opacity,
  dividers:          $black-12-opacity,
  disabled:          rgba(black, 0.38),
  disabled-button:   rgba(black, 0.38),
  disabled-text:     rgba(black, 0.38),
  hint-text:         rgba(black, 0.38),
  secondary-text:    rgba(black, 0.54),
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
);

// Foreground palette for dark themes.
$mat-dark-theme-foreground: (
  base:              white,
  divider:           $white-12-opacity,
  dividers:          $white-12-opacity,
  disabled:          rgba(white, 0.3),
  disabled-button:   rgba(white, 0.3),
  disabled-text:     rgba(white, 0.3),
  hint-text:         rgba(white, 0.3),
  secondary-text:    rgba(white, 0.7),
  icon:              white,
  icons:             white,
  text:              white,
  slider-off:        rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3),
);
2
kortex

Il n'y a aucun moyen de le faire "correctement" - seulement des solutions de contournement et des hacks. Votre thème peut définir des palettes principale, secondaire et d'avertissement, mais pas les palettes d'avant-plan et d'arrière-plan. La raison probable pour laquelle il n'existe pas de moyen direct/facile de procéder dans Angular Material est que, selon Material Design, vous ne devriez pas procéder ainsi. La couleur est destinée à être utilisée de manière spécifique pour mettre en évidence et styliser divers éléments en fonction de votre thème, mais les couleurs d'arrière-plan et de premier plan pour le contenu uni doivent être soit gris foncé, soit gris clair. Si vous avez vraiment besoin de le faire, les autres suggestions sur la redéfinition du thème d’arrière-plan ou sur l’utilisation de votre propre classe devraient suffire.

2
G. Tranter

Il y a aussi un mélange de couleurs comme ceci:

.your-class-here {
   background: mat-color($mat-grey, 700, 0.9);
}

Lorsque vous examinez des composants matériels angulaires, vous pouvez attribuer une couleur comme celle-ci.

<md-toolbar color="primary">
</md-toolbar>

Cela fera de votre barre d’outils la couleur de votre couleur primaire.

veillez également à consulter le fichier _theming.scss dans un document angulaire.

vous pouvez donc utiliser ces mixins pour extraire une couleur de votre palette.

1
Zuriel

pour une solution supplémentaire si les précédents ne fonctionnaient pas i matériau angulaire 2 fonctionne avec style d’encapsulation donc quoi que vous fassiez, vous ne pouvez pas personnaliser le composant angulaire de l’extérieur;

1- vous pouvez utiliser ce hack qui vous donnera la possibilité de personnaliser un composant de matériau angulaire si vous voulez définir ViewEncapsulation.None

//test.component.ts
import { ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-test',
  templateUrl: '.....',
  styleUrls: ['....'],
  encapsulation: ViewEncapsulation.None
})

ou

2- si vous voulez juste changer de fond, vous pouvez simplement essayer ceci

//style.css (main style file)
html, body {
  background-color: #fafafa;
}

ça va changer la couleur de fond de toute votre application

0
Amir Fawzy

Pas exactement la réponse à votre question, mais je suppose que beaucoup de gens vont finir ici en cherchant "comment définir la couleur de fond de l'application".

Dans votre project/index.html, définissez votre classe de corps sur mat-app-background

<body class="mat-app-background">
  <app-root></app-root>
</body>

Et assurez-vous que dans votre project/angular.json vous avez:

        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/YOUR_STYLE.css",
          ...
        ],
0
Caner

Je suggérerais que vous déclariez une couleur de fond dans un fichier de variables (en supposant que vous utilisiez sass), puis importez-la simplement si nécessaire. Par exemple:-

@import '../config/variables';

body {
    height: 100%;
    margin: 0;
    background-color: $brand-primary;
}
0
micko