Defining multipl palettes, themed & success/warn/danger

palettes.scss

@use '@angular/material' as mat;


$md-palette:  (
    50 : #e3e6ea,
    100 : #b9c0cb,
    200 : #8a96a9,
    300 : #5b6b86,
    400 : #374c6c,
    500 : #142c52,
    600 : #12274b,
    700 : #0e2141,
    800 : #0b1b38,
    900 : #061028,
    A100 : #6488ff,
    A200 : #3161ff,
    A400 : #003bfd,
    A700 : #0035e3,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #ffffff,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);


$md-accent-palette: (
  50: #fff9ee,
  100: #fff1d4,
  200: #ffe7b8,
  300: #ffdd9b,
  400: #ffd685,
  500: #ffcf70,
  600: #ffca68,
  700: #ffc35d,
  800: #ffbd53,
  900: #ffb241,
  A100: #ffffff,
  A200: #ffffff,
  A400: #fff6e9,
  A700: #ffebcf,
  contrast: (50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);


$theme-success: mat.define-palette(mat.$green-palette);
$theme-danger: mat.define-palette(mat.$red-palette);
$theme-warn: mat.define-palette(mat.$orange-palette);

style.scss

@use './assets/scss/palettes' as palettes;
// Plus imports for other components in your app.

// 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. Available color palettes: https://material.io/design/color/
/* For use in src/lib/core/theming/_palette.scss */

$theme-primary: mat.define-palette(palettes.$md-palette);
$theme-accent: mat.define-palette(palettes.$md-accent-palette);

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

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$combined-theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    density: -3,
  )
);

@include mat.all-component-typographies($combined-theme);
@include mat.all-component-themes($combined-theme);
//@include mat.core-theme($theme-theme);
/* You can add global styles to this file, and also import other style files */

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

html,
body {
  height: 100%;
  .mdc-button.mat-success,
  .mat-mdc-stroked-button.mat-success {
    color: #155724;
  }
  .mat-mdc-unelevated-button.mat-success:hover,
  .mat-mdc-raised-button.mat-success:hover {
    color: #f0fff3;
    background-color: #1b742f;
  }

  .mat-mdc-unelevated-button:not(:disabled).mat-success,
  .mat-mdc-unelevated-button:not(:hover).mat-success,
  .mat-mdc-raised-button.mat-success,
  .mat-mdc-fab.mat-success,
  .mat-mdc-mini-fab.mat-success {
    color: #f0fff3;
    background-color: #155724;
  }
  .mat-mdc-icon-button.mat-success {
    color: #155724;
  }

  // danger
  .mdc-button.mat-danger,
  .mat-mdc-stroked-button.mat-danger {
    color: red;
  }
  .mat-mdc-unelevated-button.mat-danger:hover,
  .mat-mdc-raised-button.mat-danger:hover {
    color: #f0fff3;
    background-color: red;
  }

  .mat-mdc-unelevated-button:not(:disabled).mat-danger,
  .mat-mdc-unelevated-button:not(:hover).mat-danger,
  .mat-mdc-raised-button.mat-danger,
  .mat-mdc-fab.mat-danger,
  .mat-mdc-mini-fab.mat-danger {
    color: #f0fff3;
    background-color: red;
  }
  .mat-mdc-icon-button.mat-danger {
    color: red;
  }
}

.mat-drawer-container {
  height: 100%;
  background-color: #ffffff !important; // was d9d9d9
}

.success {
  background-color: mat.get-color-from-palette(palettes.$theme-success, 500) !important;
  color: mat.get-color-from-palette(palettes.$theme-success, 50) !important;
}

.danger {
  background-color: mat.get-color-from-palette(palettes.$theme-danger, 500) !important;
  color: mat.get-color-from-palette(palettes.$theme-danger, 50) !important;
}