Как я могу заставить свой коврик-слайд-переключатель следовать новому стилю в Angular 18?

Я использую Angular 18 (18.1.2) для приложения с материалом (18.1.2). Я столкнулся со странной проблемой, когда мой mat-slide-toggle полностью не имеет стиля (не соответствует никаким цветам темы) и, кроме того, выглядит как слайд-переключатель до Angular 15. В своем приложении я использую сгенерированную тему Material 3 (я следовал этому руководству). Все остальные компоненты вроде работают нормально.

что-то.компонент.html

<mat-slide-toggle [(ngModel)] = "editMode"> Edit mode </mat-slide-toggle>

@if (editMode) {
<button mat-stroked-button> Button </button>
}

что-то.компонент.ц

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;
}

Я ожидаю увидеть переключатель слайдов, похожий на тот, что в документации:

Вместо этого я вижу это, которое не использует мой основной цвет (розовый, изображенный здесь на кнопке) и выглядит как слайд-переключатель компонента pre-MDC из Angular 14.

Что я делаю не так?

Обновлено:

стили.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,
  ),
));

РЕДАКТИРОВАТЬ № 2:

После предложения @NarenMurali и импорта тем компонентов он по-прежнему выглядит шатко, но ближе к тому, что указано в документации:

РЕДАКТИРОВАТЬ № 3:

Следуя совету @NarenMurali, обнаружил, что к флажку m3 каким-то образом применен класс mat-accent. Попробовал явно указать основной цвет через:

@mixin color($theme) {
  .primary-toggle {
    @include mat.slide-toggle-color($theme, $color-variant : primary);
    background-color: red;
  }
}

и миксин определенно работает, поскольку я вижу красный фон, но цвет переключателя все еще не является основным.

🤔 А знаете ли вы, что...
С помощью Angular можно легко интегрировать сторонние библиотеки и компоненты.