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 @@ -

Slider configuration

- -
- - - - Primary - - - Accent - - - Warn - - -
+

Slide toggle configuration

Checked @@ -34,7 +19,6 @@

Result

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. `` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`. -### Theming -The color of a `` 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 `