# 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. ````scss $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. ```typescript 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. ```scss $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. ```scss $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: ```scss $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. 2. **Include in themes object** After defining the theme, we need to include it in the "**app.component.ts**" file, as illustrated below. ```typescript themes: string[] = [ "deeppurple-amber", "indigo-pink", "pink-bluegrey", "purple-green", "joy", "aquapurple" ]; ``` And the expected result is:
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ed.sunbird.org/use/source-code/ui-user-interface-sunbird-ed-portal/angular-material/customazion/theme.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.