How can I make my mat-slide-toggle follow the new style in Angular 18?
I am using Angular 18 (18.1.2) for an application with material (18.1.2). I run into a weird issue where my mat-slide-toggle is unstyled completely (doesn't follow any theme colors) and moreover looks like pre-Angular 15 slide-toggle. I use a generated Material 3 theme in my application (I followed this guide ). All other components seem to be working normally.
something.component.html
<mat-slide-toggle [(ngModel)]="editMode"> Edit mode </mat-slide-toggle>
@if (editMode) {
<button mat-stroked-button> Button </button>
}
something.component.ts
import { Component } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-something',
standalone: true,
imports: [MatSlideToggleModule, FormsModule],
templateUrl: 'something.component.html',
})
export class SomethingComponent {
editMode: boolean = false;
}
I'm expecting to see a slide toggle looking like the one in the docs:
Instead I am seeing this, which doesn't use my primary color (pink, pictured here on a button) and looks like pre-MDC component slide-toggle from Angular 14.
What am I doing wrong?
EDIT:
styles.scss
// Import Angular Material theming
@use '@angular/material' as mat;
@use './theming/m3-theme' as m3;
// Import Tailwind CSS base, components, and utilities
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
// Apply the custom themes for Angular Material
html {
@include mat.all-component-colors(m3.$light-theme);
@include mat.core-theme(m3.$light-theme);
@include mat.button-theme(m3.$light-theme);
@media (prefers-color-scheme: dark) {
@include mat.all-component-colors(m3.$dark-theme);
}
}
m3-theme.scss
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.
@use 'sass:map';
@use '@angular/material' as mat;
// Note: Color palettes are generated from primary: #e64d87
$_palettes: (
primary: (
0: #000000,
10: #3f001c,
20: #650031,
25: #79003c,
30: #8e0047,
35: #a01053,
40: #b1215f,
50: #d23d78,
60: #f45891,
70: #ff84ac,
80: #ffb1c6,
90: #ffd9e1,
95: #ffecef,
98: #fff8f8,
99: #fffbff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #2b151c,
20: #422930,
25: #4e343b,
30: #5b3f47,
35: #674b52,
40: #74565e,
50: #8f6f77,
60: #aa8890,
70: #c6a2aa,
80: #e3bdc6,
90: #ffd9e1,
95: #ffecef,
98: #fff8f8,
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #2d1600,
20: #47290b,
25: #543415,
30: #613f1f,
35: #6e4b29,
40: #7c5634,
50: #976f4a,
60: #b48862,
70: #d1a27a,
80: #eebd93,
90: #ffdcc0,
95: #ffeee2,
98: #fff8f5,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #201a1b,
20: #352f30,
25: #413a3b,
30: #4c4546,
35: #585052,
40: #655c5e,
50: #7e7576,
60: #988e90,
70: #b3a9aa,
80: #cfc4c5,
90: #ece0e1,
95: #faeeef,
98: #fff8f8,
99: #fffbff,
100: #ffffff,
4: #120d0e,
6: #171213,
12: #241e1f,
17: #2f282a,
22: #3a3334,
24: #3e3739,
87: #e3d7d9,
92: #f1e5e7,
94: #f7ebec,
96: #fdf1f2,
),
neutral-variant: (
0: #000000,
10: #24191b,
20: #3a2d30,
25: #45383b,
30: #514346,
35: #5d4f52,
40: #6a5a5e,
50: #837376,
60: #9e8c90,
70: #b9a7aa,
80: #d6c2c5,
90: #f2dde1,
95: #ffecef,
98: #fff8f8,
99: #fffbff,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);
$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
),
));
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: $_primary,
tertiary: $_tertiary,
),
));
EDIT #2:
After following @NarenMurali's suggestion and importing the components' themes, it still looks wonky but closer to the one in the docs:
EDIT #3:
Following @NarenMurali's advice, discovered that there is mat-accent class somehow applied to the m3 checkbox. Tried to explicitly give it the primary color via:
@mixin color($theme) {
.primary-toggle {
@include mat.slide-toggle-color($theme, $color-variant : primary);
background-color: red;
}
}
and the mixin definitely works as I can see the red background, but the color of the toggle is still not primary.
After a lot of fiddling, I figured out a way to fix it.
The toggle was fixed for me by re-installing Angular Material. Do npm uninstall @angular/material and, if needed, npm uninstall @angular/material-experimental (I installed it in hops of fixing the toggle, but it didn't do anything). I tried to run the app at this point to check that it definitely doesn't run due to all the error due to the missing Material. After this, do ng add @angular/material and check that it installs the latest material. I accepted a default theme, but it was overrun anyway by my existing styles.scss. When you relaunch the app, you should have slide-toggles that look exactly like those in the docs. With default theme (i.e with clean styles.scss) even the colors should be okay.
I continued fiddling to fix the colors — I am not sure if it's crucial to accept a default theme at the start to fix the toggle, but later on, to theme the toggle with your theme colors I just removed the import of the default theme in angular.json → styles. I also removed the @include mat.color-variants-backwards-compatibility($theme); line. Now, my slide-toggles are themed correctly.
I should also note that all styles in my app break if I generate an m3 theme with system variables, so I have no idea how do themes using system variables behave.
I am not sure if it's crucial to the fix, but I also used this guide: https://angular.dev/tools/cli/build-system-migration to migrate to a new build system. It didn't do anything for the toggle by itself, but I mention it anyway, as later changes I did were using this build system.