Angular Material multiple themes

Question

I have a file with my theme setup

@import '~@angular/material/theming';
@include mat-core();

$app-primary: mat-palette($mat-cyan, 600);
$app-accent: mat-palette($mat-indigo, 900);
$app-warn: mat-palette($mat-red);

$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

@include angular-material-theme($app-theme);

And this works fine. However, now I need extra color in one component and I decided to make another theme for that specific component.

@import "~@angular/material/theming";

$radio-app-primary: mat-palette($mat-cyan, 600);
$radio-app-accent: mat-palette($mat-yellow, 900);
$radio-app-warn: mat-palette($mat-deep-purple);

$radio-app-theme: mat-light-theme($radio-app-primary, $radio-app-accent, $radio-app-warn);

@include angular-material-theme($radio-app-theme);

But this doesn't seem to affect my radio group in any way.

This is my component's html

<mat-radio-group [formControl]="control">
        <div class="row">
            <div class="col-6" *ngFor="let option of radioOptions; let i = index">
                <mat-radio-button [value]="option.value" [color]="i == 1 ? 'accent' : null">
                    <mat-form-field class="w-100">
                        <input type="text" matInput [placeholder]="option.label" [readonly]="true"
                               style="pointer-events: none" [value]="option.string">
                    </mat-form-field>
                </mat-radio-button>
            </div>
        </div>
    </mat-radio-group>

I tried to seek styles from my custom theme and I found something but that doesn't seem to apply to component's inner mat components. They still use global theme colors.

Have a look at this answer https://stackoverflow.com/questions/53213544/how-to-change-color-of-angular-material-stepper-step-icons/53214714#53214714 — Nenad Radak, Jan 24 '19 at 13:34

Sergey · Answer 1 · 2019-01-25T08:25:39.047

Small investigation has shown that there is some problem with selector that was created.

In css there is [_nghost-c24] .mat-radio-button.mat-accent.mat-radio-checked[_ngcontent-c24] .mat-radio-outer-circle[_ngcontent-c24]

Meanwhile, I could follow this line only to here [_nghost-c24] .mat-radio-button.mat-accent.mat-radio-checked[_ngcontent-c24] .mat-radio-outer-circle. By some reason in my Angular app there is no such tag but css was generated as if circle had it.

As a workaround one can create special class-wrapper for another theme and use it. It's important that this style should be in global scope (i.e. not encapsulated). In my case I added below the main theme in my styles.scss

$radio-primary: mat-palette($mat-orange, 600);
$radio-accent: mat-palette($mat-indigo, 900);

$radio-theme: mat-light-theme($radio-primary, $radio-accent);

.radio-orange {
    @include mat-radio-theme($radio-theme);
}

And wrapped my desired components with this class. Now it works.

Angular Material multiple themes

1 Answers1