new release -7.0.0 (Jun 2024)Askdot

Theme

Angular Material's theming system is widely recommended for achieving consistent and manageable custom styles throughout your application. It offers a structured and efficient approach to defining and implementing custom themes, facilitating a cohesive and visually pleasing design.

Custom Theme

Within the same "_palette.scss" file, we have defined a theme called "Joy" within the "app-themes" section. We have configured various parameters using the created palettes, as demonstrated below.

$app-themes: (
  //newly added theme
  joy: (
    primary-base: $sb-mat-joy-primary,
    accent-base: $sb-mat-joy-accent,
    success: mat.$green-palette,
    is-dark: false,
    foreground: mat.$light-theme-foreground-palette,
    background: mat.$light-theme-background-palette,
  ),
```
);

After defining the theme, we need to include it in the "app.component.ts" file, as illustrated below.

themes: string[] = [
    "deeppurple-amber",
    "indigo-pink",
    "pink-bluegrey",
    "purple-green",
    "joy"
  ];

After completing the aforementioned steps, you will notice that the "Joy" theme has been applied to our website, as shown below.

Themes Customization

A theme is a collection of color and typography options. Each theme includes three palettes that determine component colors:

  • A primary palette for the color that appears most frequently throughout your application

  • An accent, or secondary, palette used to selectively highlight key parts of your UI

  • A warn, or error, palette used for warnings and error states

We included the relevant code in the "themes.scss" file located within the "mat-themes" folder.

$primary: if(map-has-key($theme, primary),
      map-get($theme, primary),
      mat.define-palette(map-get($theme, primary-base)));
  $accent: if(map-has-key($theme, accent),
      map-get($theme, accent),
      mat.define-palette(map-get($theme, accent-base)));
  $success: if(map-has-key($theme, success),
      map-get($theme, success),
      mat.define-palette(map-get($theme, success-base)));
  $warn: if(map-has-key($theme, warn),
      map-get($theme, warn),
      mat.define-palette(if(map-has-key($theme, warn-base),
          map-get($theme, warn-base),
          mat.$red-palette)));
  $background: if(map-has-key($theme, background),
      map-get($theme, background),
      mat.define-palette(if(map-has-key($theme, background),
          map-get($theme, background),
          $background)));
  $foreground: if(map-has-key($theme, foreground),
      map-get($theme, foreground),
      mat.define-palette(if(map-has-key($theme, foreground),
          map-get($theme, foreground),
          $foreground)));

For existing light theme CSS variables in themes.scss file, we have also recreated them using Angular Material theme palettes, as illustrated below.

    $primary50: mat.get-color-from-palette($primary, 50);
    $primary100: mat.get-color-from-palette($primary, 100);
    $primary200: mat.get-color-from-palette($primary, 200);
    --sbt-body-bg: var(--color-primary-50);
    --sbt-body-bg2: var(--color-primary-100);
    --sbt-footer-bg: var(--sbt-body-bg2);
    --cc-grade-pill-container-bg: var(--sbt-body-bg);
    --sbt-compt-bg: var(--sbt-body-bg);
    --cc-chapter-bg: var(--sbt-body-bg2);
    --sbt-filter-bar-bg: var(--sbt-body-bg);
    --sbt-box-shadow-black: rgba(var(--rc-rgba-black), 0.2);
    --sbt-box-shadow-6px: 0.375rem 0.375rem 0.125rem 0 var(--sbt-box-shadow-black);
    --sbt-box-shadow-3px: 0.1875rem 0.1875rem 0.125rem 0 var(--sbt-box-shadow-black);
    --sbt-bradius: 0.125rem;
    --sbt-bradius-8: calc(var(--sbt-bradius) * 4);
    --sbt-bradius-16: calc(var(--sbt-bradius) * 8);
    --sbt-bradius-24: calc(var(--sbt-bradius) * 12);
    --sbt-bradius-32: calc(var(--sbt-bradius) * 16);
    --sb-graph-section-bg: var(--sbt-body-bg2);
    --mat-list-bg-active: var(--sbt-body-bg);
    --mat-list-border-active: var(--sbt-body-bg2);

Similarly, we have added the same for the dark mode, as demonstrated below.

     $primary100: map-get($background,
          background); // mat.get-color-from-palette($accent, 900);
      $primary200: #232323;
      --sbt-body-bg: #{$primary100};
      --sbt-body-bg2: #{$primary200}; // 232323
      // --sb-profile-bg-c-4: var(--sbt-body-bg);
      --sbt-footer-bg: var(--sbt-body-bg2);
      --cc-grade-pill-container-bg: var(--sbt-body-bg);
      --sbt-compt-bg: var(--sbt-body-bg);
      --sb-modal-content-bg: var(--sbt-body-bg);
      --sb-modal-actions-bg: var(--sbt-body-bg);
      --cc-chapter-bg: var(--sbt-body-bg2);
      --sb-section-preference: var(--white);
      --sbt-footer-info-links: var(--white);
      --sbt-filter-bar-bg: var(--sbt-body-bg);
      --list-container-bg: var(--sbt-body-bg2);
      --user-profile-box: var(--sbt-body-bg);
      --mat-list-bg: var(--sbt-body-bg);
      --mat-list-border: var(--sbt-body-bg);
      --mat-list-border-active: var(--color-success-500);
      --mat-list-bg-active: var(--sbt-body-bg2);
      --dot-divider: #fff;
      --cc-mat-card-img-container-border:#232323;
      //lazy loading styles
      --cc-mat-card-animation-bg: #333;
      --cc-mat-card-loading-bg: #666;
      --cc-mat-card-loading-highlight1: #555;
      --cc-mat-card-loading-highlight2: #777;
      --mat-footer-bg: #232323;

Multiple Themes in one file

In Angular Material, you can define and manage multiple themes within a single SCSS file, allowing you to organize and maintain your theme-related code efficiently. Here's a general approach for implementing multiple themes in a single file:

  1. Set Up Your Themes: Define your different themes using Sass maps, where each map represents a theme. These maps should include various color palettes and theme-specific settings. For example:

$app-themes: (
joy: (
    primary-base: $sb-mat-joy-primary,
    accent-base: $sb-mat-joy-accent,
    success: mat.$green-palette,
    is-dark: false,
    foreground: mat.$light-theme-foreground-palette,
    background: mat.$light-theme-background-palette,
    typography:
      mat.define-typography-config(
        $font-family: var(--font-stack-en),
      ),
  ),
  aquapurple: (
    primary-base: $sbmat-aqua,
    accent-base: $sbmat-purple,
    success: mat.$green-palette,
    is-dark: false,
    foreground: mat.$light-theme-foreground-palette,
    background: mat.$light-theme-background-palette,
    typography:
      mat.define-typography-config(
        $font-family: var(--font-stack-en),
      ),
  ), 
);

In the example above, we have included two themes named "Joy" and "Aquapurple" within the "app-themes" section of the "_palette.scss" file, which is located in the "mat-themes" folder.

  1. Include in themes object

After defining the theme, we need to include it in the "app.component.ts" file, as illustrated below.

themes: string[] = [
    "deeppurple-amber",
    "indigo-pink",
    "pink-bluegrey",
    "purple-green",
    "joy",
    "aquapurple"
  ];

And the expected result is: