ToneSwitch

ToneSwitch enables the user to switch between light and dark modes using a switch control.

<App>
  <AppHeader>
    <SpaceFiller />
    <ToneSwitch />
  </AppHeader>
  <Card
    title="Tone Switch"
    subtitle="Toggle the switch to change the tone."
  />
</App>

Example: using ToneSwitch

<App>
  <AppHeader>
    <SpaceFiller />
    <ToneSwitch />
  </AppHeader>
  <Card
    title="Tone Switch"
    subtitle="Toggle the switch to change the tone."
  />
</App>

Behaviors

This component supports the following behaviors:

Behavior	Properties
Animation	`animation`, `animationOptions`
Bookmark	`bookmark`, `bookmarkLevel`, `bookmarkTitle`, `bookmarkOmitFromToc`
Component Label	`label`, `labelPosition`, `labelWidth`, `labelBreak`, `required`, `enabled`, `shrinkToLabel`, `style`, `readOnly`
Publish/Subscribe	`subscribeToTopic`
Tooltip	`tooltip`, `tooltipMarkdown`, `tooltipOptions`
Styling Variant	`variant`

Properties

`iconDark`

default: "moon"

Icon to display for dark mode

`iconLight`

default: "sun"

Icon to display for light mode

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-ToneSwitch-dark	$color-primary-500	$color-primary-500
backgroundColor-ToneSwitch-light	$color-surface-200	$color-surface-700
borderColor-ToneSwitch	$color-surface-200	$color-surface-600
borderColor-ToneSwitch--hover	$color-surface-300	$color-surface-500
color-ToneSwitch-dark	$color-surface-0	$color-surface-0
color-ToneSwitch-light	$color-text-primary	$color-text-primary