search
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.

hashtag
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.

hashtag
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.

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

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

hashtag
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:

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.

And the expected result is:

Last updated