_themes-core.scss

/**
 * Created at 1398/4/27 (2019/7/18).
 * @author {@link https://mirismaili.github.io S. Mahdi Mir-Ismaili}
 */

/**
 * @param $themes-map - Custom themes should be passed via this argument.
 * The "key" of each member is "the name of CSS class for that theme".
 *
 * Full schema of each member:
 *     css-class-name: (
 *         primary-base: base-palette,   // example: $mat-purple  // will be ignored if you set corresponding mat-palette (primary). Set it to `null` in this case.
 *         accent-base:  base-palette,   // example: $mat-green   // will be ignored if you set corresponding mat-palette (accent). Set it to `null` in this case.
 *         warn-base?:   base-palette,   // DEFAULT: $mat-red     // will be ignored if you set corresponding mat-palette (warn). Set it to `null` in this case.
 *         primary?: mat-palette,   // DEFAULT: mat-palette(primary-base)
 *         accent?:  mat-palette,   // DEFAULT: mat-palette(accent-base)
 *         warn?:    mat-palette,   // DEFAULT: mat-palette(warn-base)
 *         light-or-dark?: {'light' | 'dark' | ''},   // DEFAULT: '' => "Both light & dark"
 *     ),
 *
 * @see `mat-palette()`: https://github.com/angular/components/blob/dcde115980a2e94fae8e667d1dfa300fc82a77cb/src/material/core/theming/_theming.scss#L12-L37
 * @see https://material.angular.io/guide/theming
 */
//noinspection SassScssUnresolvedMixin, SassScssResolvedByNameOnly
@mixin make-stylesheets($themes-map) {
  @each $css-class, $theme in $themes-map {
    $primary-base: map-get($theme, primary-base);
    $accent-base: map-get($theme, accent-base);
    $warn-base: if(map-has-key($theme, warn-base), map-get($theme, warn-base), $mat-red);

    $primary: if(map-has-key($theme, primary), map-get($theme, primary), mat-palette($primary-base));
    $accent: if(map-has-key($theme, accent), map-get($theme, accent), mat-palette($accent-base));
    $warn: if(map-has-key($theme, warn), map-get($theme, warn), mat-palette($warn-base));

    $light-or-dark: if(map-has-key($theme, light-or-dark), map-get($theme, light-or-dark), '');

    // Light-themes:
    @if $light-or-dark == '' or $light-or-dark == 'light' or $light-or-dark == 'l' or $light-or-dark == 'both' {
      .#{$css-class} {
        $mat-theme: mat-light-theme($primary, $accent, $warn);
        @include angular-material-theme($mat-theme);
        @if mixin-exists(themed-stylesheets) {
          @include themed-stylesheets($mat-theme);
        }
      }
    }

    // Dark-themes:
    @if $light-or-dark == '' or $light-or-dark == 'dark' or $light-or-dark == 'd' or $light-or-dark == 'both' {
      .#{$css-class}-dark {
        $mat-theme: mat-dark-theme($primary, $accent, $warn);
        @include angular-material-theme($mat-theme);
        @if mixin-exists(themed-stylesheets) {
          @include themed-stylesheets($mat-theme);
        }
      }
    }

    // Below stylesheets have been used in theme-switcher-tool (in the toolbar):
    .theme-primary.#{$css-class} {
      background-color: mat-color($primary);
    }
    .theme-accent.#{$css-class} {
      background-color: mat-color($accent);
    }
    .theme-warn.#{$css-class} {
      background-color: mat-color($warn);
    }
  }
}