From 0a4712c17d964c81e99ac498b540adfb1da8d01d Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Wed, 26 Jun 2024 14:29:27 -0400
Subject: [PATCH] docs(material/slide-toggle): Update description and examples
 for color input description on API page (#29334)

(cherry picked from commit caeb3e8c4c81c383260bbc0156a1c3deb38005ef)
---
 .../slide-toggle-configurable-example.html     | 18 +-----------------
 .../slide-toggle-configurable-example.ts       |  2 --
 .../slide-toggle/slide-toggle-config.ts        |  8 +++++++-
 src/material/slide-toggle/slide-toggle.md      |  4 ----
 4 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.html b/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.html
index b7f41c0090c4..50bb04515072 100644
--- a/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.html
+++ b/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.html
@@ -1,21 +1,6 @@
 <mat-card>
   <mat-card-content>
-    <h2 class="example-h2">Slider configuration</h2>
-
-    <section class="example-section">
-      <label class="example-margin">Color:</label>
-      <mat-radio-group [(ngModel)]="color">
-        <mat-radio-button class="example-margin" value="primary">
-          Primary
-        </mat-radio-button>
-        <mat-radio-button class="example-margin" value="accent">
-          Accent
-        </mat-radio-button>
-        <mat-radio-button class="example-margin" value="warn">
-          Warn
-        </mat-radio-button>
-      </mat-radio-group>
-    </section>
+    <h2 class="example-h2">Slide toggle configuration</h2>
 
     <section class="example-section">
       <mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
@@ -34,7 +19,6 @@ <h2 class="example-h2">Result</h2>
     <section class="example-section">
       <mat-slide-toggle
           class="example-margin"
-          [color]="color"
           [checked]="checked"
           [disabled]="disabled">
         Slide me!
diff --git a/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts b/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts
index 9302b71a5817..eb2a6c003f1a 100644
--- a/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts
+++ b/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {ThemePalette} from '@angular/material/core';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {FormsModule} from '@angular/forms';
@@ -17,7 +16,6 @@ import {MatCardModule} from '@angular/material/card';
   imports: [MatCardModule, MatRadioModule, FormsModule, MatCheckboxModule, MatSlideToggleModule],
 })
 export class SlideToggleConfigurableExample {
-  color: ThemePalette = 'accent';
   checked = false;
   disabled = false;
 }
diff --git a/src/material/slide-toggle/slide-toggle-config.ts b/src/material/slide-toggle/slide-toggle-config.ts
index 8dfe1eaaf7b9..4b1936e834b9 100644
--- a/src/material/slide-toggle/slide-toggle-config.ts
+++ b/src/material/slide-toggle/slide-toggle-config.ts
@@ -13,7 +13,13 @@ export interface MatSlideToggleDefaultOptions {
   /** Whether toggle action triggers value changes in slide toggle. */
   disableToggleValue?: boolean;
 
-  /** Default color for slide toggles. */
+  /**
+   * Default theme color of the slide toggle. This API is supported in M2 themes only,
+   * it has no effect in M3 themes.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.io/guide/theming#using-component-color-variants.
+   */
   color?: ThemePalette;
 
   /** Whether to hide the icon inside the slide toggle. */
diff --git a/src/material/slide-toggle/slide-toggle.md b/src/material/slide-toggle/slide-toggle.md
index 5fa88962d062..9b14aaf46021 100644
--- a/src/material/slide-toggle/slide-toggle.md
+++ b/src/material/slide-toggle/slide-toggle.md
@@ -17,10 +17,6 @@ specify an appropriate label.
 `<mat-slide-toggle>` is compatible with `@angular/forms` and supports both `FormsModule`
 and `ReactiveFormsModule`.
 
-### Theming
-The color of a `<mat-slide-toggle>` can be changed by using the `color` property. By default,
-slide-toggles use the theme's accent color. This can be changed to `'primary'` or `'warn'`.
-
 ### Accessibility
 
 `MatSlideToggle` uses an internal `<button role="switch">` to provide an accessible experience. This