theme.scss

@use '@angular/material' as mat;
@use '_smp-all-themes' as smp;
@use 'sass:map';
// DomiSMP default palette
@use './_colors_smp_light' as smp-colors;

/* You can add global styles to this file, and also import other style files */


//The core mixin must be included exactly once for your application, even if you define multiple themes.
// Including the core mixin multiple times will result in duplicate CSS in your application.
@include mat.core();


// -----------------------------------------
// primary theme
$smp-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(smp-colors.$smp-primary-palette),
    accent: mat.define-palette(smp-colors.$smp-accent-palette),
    warn: mat.define-palette(smp-colors.$smp-warn-palette),
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

// -----------------------------------------
// blue theme
$blue_theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$blue-palette),
    accent: mat.define-palette(mat.$light-blue-palette),
    warn: mat.define-palette(mat.$red-palette),
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

// indigo-pink theme
$indigo_pink_theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

// -----------------------------------------
// dark theme
$pink_blue-grey_theme: mat.define-dark-theme((
  color: (
    primary: mat.define-palette(mat.$pink-palette),
    accent: mat.define-palette(mat.$blue-grey-palette),
    warn: mat.define-palette(mat.$red-palette),
  ),
  // Only include `typography` and `density` in the default dark theme.
  typography: mat.define-typography-config(),
  density: 0,
));
$purple_green_theme: mat.define-dark-theme((
  color: (
    primary: mat.define-palette(mat.$purple-palette),
    accent: mat.define-palette(mat.$green-palette),
    warn: mat.define-palette(mat.$red-palette),
  ),
  // Only include `typography` and `density` in the default dark theme.
  typography: mat.define-typography-config(),
  density: 0,
));

// define theme class
.blue_theme {
  @include mat.all-component-colors($blue-theme);
  @include smp.all-component-colors($blue-theme);
}

.indigo_pink_theme {
  @include mat.all-component-colors($indigo_pink_theme);
  @include smp.all-component-colors($indigo_pink_theme);
}

.pink_blue-grey_theme {
  @include mat.all-component-colors($pink_blue-grey_theme);
  @include smp.all-component-colors($pink_blue-grey_theme);
}

.purple_green_theme {
  @include mat.all-component-colors($purple_green_theme);
  @include smp.all-component-colors($purple_green_theme);
}

// 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 mat.all-component-themes($smp-theme);
@include smp.all-component-colors($smp-theme);