docs-bug(COMPONENT): Use of multiple themes: missing styles (Angular 18)

[ramensp]

Documentation Feedback

Hi, if I want to set 2 themes as described in the docs, essential styles are missing.

I created my themes with ng generate @angular/material:m3-theme

$ ng version                                                                                                                                                                                                   130 ↵

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 18.0.1
Node: 22.2.0
Package Manager: npm 10.7.0
OS: darwin arm64

Angular: 18.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.1
@angular-devkit/build-angular   18.0.1
@angular-devkit/core            18.0.1
@angular-devkit/schematics      18.0.1
@angular/cli                    18.0.1
@schematics/angular             18.0.1
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

dependencies:

{
    "@angular/animations": "^18.0.0",
    "@angular/cdk": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/material": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/service-worker": "^18.0.0",
    "jwt-decode": "^4.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.3"
  }

in the following examples it is missing but is included in the styles.scss

@use "@angular/material" as mat;
@use "m3-theme";

@include mat.core();

For example:

html {
    @include mat.core-theme(m3-theme.$dark-theme);
    @include mat.button-theme(m3-theme.$dark-theme);

    @media (prefers-color-scheme: light) {
        @include mat.core-color(m3-theme.$light-theme);
        @include mat.button-color(m3-theme.$light-theme);
    }
}

results in:

Note: the input at the top and the icons at the bottom

Note: "Show all properties (57 more)" at the bottom

---

html {
    @include mat.all-component-themes(m3-theme.$dark-theme);

    @media (prefers-color-scheme: light) {
        @include mat.all-component-colors(m3-theme.$light-theme);
    }
}

results in:

Note: the input at the top and the icons at the bottom

Note: "Show all properties (800 more)" at the bottom

---

If I use all 3 together, duplicate styles are generated

html {
    @include mat.core-theme(m3-theme.$dark-theme);
    @include mat.button-theme(m3-theme.$dark-theme);
    @include mat.all-component-themes(m3-theme.$dark-theme);

    @media (prefers-color-scheme: light) {
        @include mat.core-color(m3-theme.$light-theme);
        @include mat.button-color(m3-theme.$light-theme);
        @include mat.all-component-colors(m3-theme.$light-theme);
    }
}

Affected documentation page

https://material.angular.io/guide/theming#defining-multiple-themes

[amysorto]

Yes, calling both button-theme and all-components-theme mixins will result in duplicate styles. Under the hood, all-component-theme calls all of the other theme mixins.

In our theming guide, we suggest calling the individual component mixins to avoid this extra CSS as you noted.

It seems like in your case you are missing some mixin calls. You will also need to include fab-theme, input-theme, and icon-theme. Let me know if that solves this for you, thanks for using M3!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}