ThemeToggle

One icon button that flips the site between its light and dark themes.

ThemeToggle

View source · API reference

Flip the theme

The sun shows in the light theme and the moon in the dark one. Press it and the glyphs turn into each other.

Switch between the light and dark studio skins. 
<Flex align="center" wrap="true">
  <ThemeToggle />
  <span>Switch between the light and dark studio skins.</span>
</Flex>

In a settings row

The toggle sits beside a visible setting label as easily as it sits in a header.

Appearance

Choose the skin that is comfortable for you.

<Panel bodyClass="p-3">
  <Flex align="center" justify="between">
    <div>
      <strong>Appearance</strong>
      <p class="mb-0">Choose the skin that is comfortable for you.</p>
    </div>
    <ThemeToggle />
  </Flex>
</Panel>

Behavior and accessibility

ThemeToggle is a native button labelled “Dark theme”. The theme runtime keeps aria-pressed in step with the active theme, so assistive technology announces whether dark is on. The glyphs are decorative and hidden from the accessibility tree.

Each theme stylesheet decides which glyph is visible, so the right one shows on first paint without waiting for script. The turn animates only after the runtime settles the first theme, and it is switched off for visitors who prefer reduced motion.

API reference

ThemeToggle contract

ThemeToggle has no public props. Available themes and stylesheet URLs come from the site’s theme setup.

This component has no public props.

Composition

No slots. Register defineThemeToggleComponents and the Icon family. SSG includes the theme runtime, which binds every element marked data-theme-toggle; outside SSG initialize buildThemeSwitchScript with the configured theme names and matching data-theme stylesheets.