Generating an Angular Theme for Angular 15?

Question

In the various tutorials I've seen themes generated like this:

//======================================
// SHARED THEME STYLES
//======================================
@include mat.core();

.dark-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-theme($theme);
    @include mat.all-component-themes($theme);
}
.light-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-theme($theme);
    @include mat.all-component-themes($theme);
}

If I understand it correctly, this is also how Angular's Documentation tells us to do it. However when I run the build I get these warnings.

./projects/playground/src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
The same typography styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/main/guides/duplicate-theming-styles.md

../../../../node_modules/@angular/material/core/theming/_theming.scss 360:7  private-check-duplicate-theme-styles()
../../../../node_modules/@angular/material/core/_core-theme.scss 77:3        theme()
../../../elytra/src/lib/styles/themes/dark-theme.scss 139:5                  @use
../styles.scss 9:1

How do we create the themes without duplicating commons styles like Typography?

Maybe you should mention that your question refers to Angular Material 15. It seems like some users still come up with Material 14 solutions because they are not aware of the breaking changes that were introduced with the latest version. — kellermat, Jan 29 '23 at 19:37

score 1 · Accepted Answer · answered Feb 02 '23 at 20:55

According to their documentation https://material.angular.io/guide/theming#multiple-themes-in-one-file

You will see that when defining two themes you should make use of the core-color for all themes aside from the primary.

A more thorough explanation can also be found in their docs https://material.angular.io/guide/duplicate-theming-styles

The primary concept is the *-theme mixins apply the entirety of the theme (aka duplicating it each time *-theme is called) whereas the *-color mixins only change the color of the respective components while leaving the rest alone.

I made changes to your example below to reflect the reading.

//Say this is your primary 
.dark-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-theme($theme);
    @include mat.all-component-themes($theme);
}
//and this being your secondary theme
.light-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-color($theme);  <---- This is the magic
    @include mat.all-component-colors($theme); <---- This is the magic
}

I also asked for some clarification on a certain aspect on this from Angular. https://github.com/angular/components/issues/26573 — Ole, Feb 06 '23 at 01:58

Generating an Angular Theme for Angular 15?

1 Answers1