ToneChangerButton

ToneChangerButton enables the user to switch between light and dark modes.

<App>
  <AppHeader>
    <SpaceFiller />
    <ToneChangerButton />
  </AppHeader>
  <Card
    title="Tone Changer Button"
    subtitle="Click the button in the header to change the tone."
  />
</App>

Example: using ToneChangerButton

<App>
  <AppHeader>
    <SpaceFiller />
    <ToneChangerButton />
  </AppHeader>
  <Card
    title="Tone Changer Button"
    subtitle="Click the button in the header to change the tone."
  />
</App>

Properties

`darkToLightIcon` (default: "darkToLight:ToneChangerButton")

The icon displayed when the theme is in dark mode and will switch to light. You can change the default icon for all ToneChangerButton instances with the "icon.darkToLight:ToneChangerButton" declaration in the app configuration file.

`lightToDarkIcon` (default: "lightToDark:ToneChangerButton")

The icon displayed when the theme is in light mode and will switch to dark. You can change the default icon for all ToneChangerButton instances with the "icon.lightToDark:ToneChangerButton" declaration in the app configuration file.

Events

`click`

This event is triggered when the ToneChangerButton is clicked.

Exposed Methods

This component does not expose any methods.

Styling

This component does not have any styles.