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.
Copy $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.
Copy 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.
Copy $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.
Copy $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.
Copy $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:
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:
Copy $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.
After defining the theme, we need to include it in the "app.component.ts " file, as illustrated below.
Copy themes: string[] = [
"deeppurple-amber",
"indigo-pink",
"pink-bluegrey",
"purple-green",
"joy",
"aquapurple"
];
And the expected result is: