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:
Last updated 8 months ago