How can I make my mat-slide-toggle follow the new style in Angular 18?

Question

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.

Answer 1

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.