Color

Override Colors (Light / Dark Theme)

For any change in colors : src/assets/scss/themecolors/_green_theme.scss 
                    
@use "sass:map";
@use "@angular/material" as mat;

html.green_theme {
  --mat-sys-primary: rgb(22, 90, 80);
  --mat-sys-primary-fixed-dim: rgba(22, 90, 80, 0.15);
  --mat-sys-secondary: rgb(194 253 117);
  --mat-sys-secondary-fixed-dim: rgba(194, 253, 117, 0.15);
  --mat-sys-tertiary: rgb(194 253 117);
}

Light Theme Variables Settings

For any change in colors : src/assets/scss/theme-variables/_light-theme-variables.scss 
                    
html.light-theme {
  color-scheme: light;
  --mat-sys-corner-small: 12px;
  --mat-sys-corner-medium: 16px;
  --mat-sys-background: #F5F5F5;
  --mat-sys-surface-bright: #f2f6fa;
  --mat-sys-surface: #fff;
  --mat-sys-surface-container: #fff;
  --mat-sys-surface-container-low: #fff;
  --mat-sys-surface-container-lowest: #686e6b;
  --mat-sys-on-background: #030E09;
  --mat-sys-outline: #e5e6e6;
  --mat-sys-outline-variant: #e5e6e6;
  --mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary);
  --mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-menu-item-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-button-toggle-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-option-focus-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-option-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-slide-toggle-unselected-track-color: var(--mat-sys-primary-fixed-dim);
  --mat-stepper-header-focus-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-stepper-header-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-dialog-supporting-text-color: var(--mat-sys-on-background);
  --mat-expansion-header-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
}

Dark Theme Variables Settings

For any change in colors : src/assets/scss/theme-variables/_dark-theme-variables.scss 
                    
html.dark-theme {
  color-scheme: dark;
  --mat-sys-corner-small: 8px;
  --mat-sys-corner-medium: 16px;
  --mat-sys-background: #141a18;
  --mat-sys-on-background: #fff;
  --mat-sys-on-primary: #fff;
  --mat-sys-surface-bright: #ffffff05;
  --mat-sys-surface: #030e09;
  --mat-sys-surface-container: #030e09;
  --mat-sys-surface-container-low: #1f2a3d;
  --mat-sys-outline-variant: #1c2622;
  --mat-sys-outline: #1c2622;
  --mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary);
  --mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-menu-item-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-button-toggle-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-option-focus-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-option-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-slide-toggle-unselected-track-color: var(--mat-sys-primary-fixed-dim);
  --mat-stepper-header-focus-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-stepper-header-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-expansion-header-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  @include mat.card-overrides(
    (
      elevated-container-color: #030e09,
      elevated-container-elevation: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px,
      subtitle-text-color: rgba(255, 255, 255, 0.67),
    )
  );
  @include mat.theme-overrides(
    (
      level1: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
      level2: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
      level3: 0px 12px 24px -4px rgba(143, 176, 210, 0.02),
    )
  );
}