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>

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