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

`didChange`

This event is fired when the user switches between light and dark modes.

Signature: didChange(tone: string): void

tone: The new tone value: "light" or "dark".

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-indicator-ToneSwitch	white	white
backgroundColor-ToneSwitch-dark	$color-primary-500	$color-primary-500
backgroundColor-ToneSwitch-light	$color-surface-200	$color-surface-700
borderColor-ToneSwitch	$color-surface-300	$color-surface-700
borderColor-ToneSwitch--hover	$color-surface-400	$color-surface-600
boxShadow-indicator-ToneSwitch	0 2px 4px rgba(0, 0, 0, 0.1)	0 2px 4px rgba(0, 0, 0, 0.1)
color-ToneSwitch-dark	$color-surface-0	$color-surface-0
color-ToneSwitch-light	$color-text-primary	$color-text-primary