RTL/src/app/shared/theme/styles/theme.scss

@use '@angular/material' as mat;
@import '@angular/material/theming';
@import 'theme-font';
@import 'theme-mode-dark';
@import 'theme-mode-light';
@import 'theme-color';
@import 'typography';

.rtl-container{
  // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.all-legacy-component-typographies();
@include mat.legacy-core(); //CHECK IF MATERIAL STYLES BEHAVE STRANGELY
  &.purple {
    @import "../skins/purple";
    &.small {@include theme-font($small-typography);}
    &.medium {@include theme-font($medium-typography);}
    &.large {@include theme-font($large-typography);}
    &.day {
      @include mat.all-legacy-component-themes($purple-day-theme);
      @include theme-mode-light($purple-day-theme);
      @include theme-color($purple-day-theme);
    }
    &.night {
      @include mat.all-legacy-component-themes($purple-night-theme);
      @include theme-mode-dark($purple-night-theme);
      @include theme-color($purple-night-theme);
    }
  }
  &.blue{
    @import "../skins/blue";
    &.small {@include theme-font($small-typography);}
    &.medium {@include theme-font($medium-typography);}
    &.large {@include theme-font($large-typography);}
    &.day {
      @include mat.all-legacy-component-themes($blue-day-theme);
      @include theme-mode-light($blue-day-theme);
      @include theme-color($blue-day-theme);
    }
    &.night {
      @include mat.all-legacy-component-themes($blue-night-theme);
      @include theme-mode-dark($blue-night-theme);
      @include theme-color($blue-night-theme);
    }
  }
  &.indigo{
    @import "../skins/indigo";
    &.small {@include theme-font($small-typography);}
    &.medium {@include theme-font($medium-typography);}
    &.large {@include theme-font($large-typography);}
    &.day {
      @include mat.all-legacy-component-themes($indigo-day-theme);
      @include theme-mode-light($indigo-day-theme);
      @include theme-color($indigo-day-theme);
    }
    &.night {
      @include mat.all-legacy-component-themes($indigo-night-theme);
      @include theme-mode-dark($indigo-night-theme);
      @include theme-color($indigo-night-theme);
    }
  }
  &.green{
    @import "../skins/green";
    &.small {@include theme-font($small-typography);}
    &.medium {@include theme-font($medium-typography);}
    &.large {@include theme-font($large-typography);}
    &.day {
      @include mat.all-legacy-component-themes($green-day-theme);
      @include theme-mode-light($green-day-theme);
      @include theme-color($green-day-theme);
    }
    &.night {
      @include mat.all-legacy-component-themes($green-night-theme);
      @include theme-mode-dark($green-night-theme);
      @include theme-color($green-night-theme);
    }
  }
  &.teal{
    @import "../skins/teal";
    &.small {@include theme-font($small-typography);}
    &.medium {@include theme-font($medium-typography);}
    &.large {@include theme-font($large-typography);}
    &.day {
      @include mat.all-legacy-component-themes($teal-day-theme);
      @include theme-mode-light($teal-day-theme);
      @include theme-color($teal-day-theme);
    }
    &.night {
      @include mat.all-legacy-component-themes($teal-night-theme);
      @include theme-mode-dark($teal-night-theme);
      @include theme-color($teal-night-theme);
    }
  }
  &.pink{
    @import "../skins/pink";
    &.small {@include theme-font($small-typography);}
    &.medium {@include theme-font($medium-typography);}
    &.large {@include theme-font($large-typography);}
    &.day {
      @include mat.all-legacy-component-themes($pink-day-theme);
      @include theme-mode-light($pink-day-theme);
      @include theme-color($pink-day-theme);
    }
    &.night {
      @include mat.all-legacy-component-themes($pink-night-theme);
      @include theme-mode-dark($pink-night-theme);
      @include theme-color($pink-night-theme);
    }
  }
  &.yellow{
    @import "../skins/yellow";
    &.small {@include theme-font($small-typography);}
    &.medium {@include theme-font($medium-typography);}
    &.large {@include theme-font($large-typography);}
    &.day {
      @include mat.all-legacy-component-themes($yellow-day-theme);
      @include theme-mode-light($yellow-day-theme);
      @include theme-color($yellow-day-theme);
    }
    &.night {
      @include mat.all-legacy-component-themes($yellow-night-theme);
      @include theme-mode-dark($yellow-night-theme);
      @include theme-color($yellow-night-theme);
    }
  }
}