Angulaire Material2 thématisation - comment mettre en application d'arrière-plan?

Si vous voulez changer le thème de couleur d'arrière-plan pour l'ensemble de l'application de manière propre, vous pouvez remplacer votre thème avec le suivant.

//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 à l'aide de mat-light-theme ou mat-dark-theme. Bien sûr, vous pouvez remplacer $mat-blue-grey pour une carte de la couleur de votre choix.

Voici un exemple complet de la façon dont je suis en utilisant ce. J'ai le texte suivant dans un fichier appelé theme.scss, qui est inclus dans mon angular.json "styles" d'entrée:

//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);

OriginalL'auteur Jake Stoeffler

voir : palette thème scss sur github Angulaire (2) Matériel (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),
);

OriginalL'auteur kortex

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

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

Lorsque l'on regarde angulaire du matériel de composants vous pouvez attribuer une couleur comme ça.

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

Qui feront de votre barre d'outils de la couleur de votre couleur primaire.

aussi assurez-vous de regarder _theming.scss fichier angulaire du matériel.

de sorte que vous pouvez utiliser ces mixin de tirer juste une couleur de la palette.

OriginalL'auteur Zuriel

Je voudrais suggérer que vous déclarez une couleur de fond dans une des variables fichier (en supposant que vous êtes à l'aide de sass) ensuite, il suffit de l'importer en cas de besoin. Par exemple:-

@import '../config/variables';

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

OriginalL'auteur micko