CODEWITHSUNDEEP
angularangular-material2
qwertybin
qwertybin

Reputation: 55

Material 2 Adding more color variables

Is there a way to add more color variables as opposed to just having "primary", "accent", and "warn"?

Upvotes: 4

Views: 1376

Answers (1)

Luciano Huguenin
Luciano Huguenin

Reputation: 221

It's quite simple, you have to add in this way, :

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

.alternate-theme {
  $alternate-primary: mat-palette($mat-light-blue);
  $alternate-accent:  mat-palette($mat-yellow, 400);

  $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent);

  @include angular-material-theme($alternate-theme);
}

And then:

<md-card>
  Main Theme:
  <button md-raised-button color="primary">
    Primary
  </button>
  <button md-raised-button color="accent">
    Accent
  </button>
  <button md-raised-button color="warn">
    Warning
  </button>
</md-card>

<md-card class="alternate-theme">
  Alternate Theme:
  <button md-raised-button color="primary">
    Primary
  </button>
  <button md-raised-button color="accent">
    Accent
  </button>
  <button md-raised-button color="warn">
    Warning
  </button>
</md-card>

Upvotes: 2

Related Questions