Actions

Theme Switch

A menu, toggle group or select that sets the light, dark or auto theme of a root.

Class name	Type	Description
`dropdownplf:dropdown`	Component	A Dropdown Menu with data-plf-theme-switch
`menuplf:menu`	Component	The list of themes, with dropdown-content
`dropdown-contentplf:dropdown-content`	Part	The floating panel
`menu-itemplf:menu-item`	Part	A theme item with its value
`menu-iconplf:menu-icon`	Part	Your own SVG, in place of the theme's drawn icon; an icon class there doesn't need it
`menu-textplf:menu-text`	Part	An item's text

Default

The switch sets data-plf-theme on the data-plf-root that holds it, never on the page; see Themes and cascade.

Pelatform

The switch changes the theme of the root it sits in.

Preview

<div data-plf-root data-plf-theme="auto">
  <div class="card">
    <div class="card-header">
      <div class="flex flex-wrap gap-4 justify-between items-center">
        <h4 class="card-title">Pelatform</h4>
        <div class="dropdown" data-plf-dropdown-menu data-plf-align="end" data-plf-theme-switch hidden>
          <button class="btn btn-ghost btn-square" aria-label="Color theme">
            <span class="icon icon-sun" data-plf-theme-switch-icon="light"></span>
            <span class="icon icon-moon" data-plf-theme-switch-icon="dark"></span>
            <span class="icon icon-device-desktop" data-plf-theme-switch-icon="auto"></span>
          </button>
          <div class="dropdown-content menu" hidden>
            <button class="menu-item" value="light">
              <span class="menu-text">Light</span>
            </button>
            <button class="menu-item" value="dark">
              <span class="menu-text">Dark</span>
            </button>
            <button class="menu-item" value="auto">
              <span class="menu-text">Auto</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body flex flex-col gap-4">
      <p class="card-description">The switch changes the theme of the root it sits in.</p>
      <div class="flex flex-wrap items-center gap-4">
        <button class="btn btn-primary">Save changes</button>
        <button class="btn btn-outline">Cancel</button>
        <span class="badge badge-outline">Preview</span>
      </div>
    </div>
  </div>
</div>

<div data-plf-root data-plf-theme="auto">
  <div class="plf:card">
    <div class="plf:card-header">
      <div class="plf:flex plf:flex-wrap plf:gap-4 plf:justify-between plf:items-center">
        <h4 class="plf:card-title">Pelatform</h4>
        <div class="plf:dropdown" data-plf-dropdown-menu data-plf-align="end" data-plf-theme-switch hidden>
          <button class="plf:btn plf:btn-ghost plf:btn-square" aria-label="Color theme">
            <span class="plf:icon plf:icon-sun" data-plf-theme-switch-icon="light"></span>
            <span class="plf:icon plf:icon-moon" data-plf-theme-switch-icon="dark"></span>
            <span class="plf:icon plf:icon-device-desktop" data-plf-theme-switch-icon="auto"></span>
          </button>
          <div class="plf:dropdown-content plf:menu" hidden>
            <button class="plf:menu-item" value="light">
              <span class="plf:menu-text">Light</span>
            </button>
            <button class="plf:menu-item" value="dark">
              <span class="plf:menu-text">Dark</span>
            </button>
            <button class="plf:menu-item" value="auto">
              <span class="plf:menu-text">Auto</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="plf:card-body plf:flex plf:flex-col plf:gap-4">
      <p class="plf:card-description">The switch changes the theme of the root it sits in.</p>
      <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
        <button class="plf:btn plf:btn-primary">Save changes</button>
        <button class="plf:btn plf:btn-outline">Cancel</button>
        <span class="plf:badge plf:badge-outline">Preview</span>
      </div>
    </div>
  </div>
</div>

import { Badge, Button, Card, CardBody, CardDescription, CardHeader, CardTitle, ThemeSwitch } from '@pelatform/react';

export function Example() {
  return (
    <div data-plf-root data-plf-theme="auto">
      <Card>
        <CardHeader>
          <div className="flex flex-wrap gap-4 justify-between items-center">
            <CardTitle level={4}>Pelatform</CardTitle>
            <ThemeSwitch align="end" defaultValue="auto" />
          </div>
        </CardHeader>
        <CardBody className="flex flex-col gap-4">
          <CardDescription>The switch changes the theme of the root it sits in.</CardDescription>
          <div className="flex flex-wrap items-center gap-4">
            <Button color="primary">Save changes</Button>
            <Button variant="outline">Cancel</Button>
            <Badge variant="outline">Preview</Badge>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

import { Badge, Button, Card, CardBody, CardDescription, CardHeader, CardTitle, ThemeSwitch } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <div data-plf-root data-plf-theme="auto">
      <Card>
        <CardHeader>
          <div className="plf:flex plf:flex-wrap plf:gap-4 plf:justify-between plf:items-center">
            <CardTitle level={4}>Pelatform</CardTitle>
            <ThemeSwitch align="end" defaultValue="auto" />
          </div>
        </CardHeader>
        <CardBody className="plf:flex plf:flex-col plf:gap-4">
          <CardDescription>The switch changes the theme of the root it sits in.</CardDescription>
          <div className="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
            <Button color="primary">Save changes</Button>
            <Button variant="outline">Cancel</Button>
            <Badge variant="outline">Preview</Badge>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

Toggle group

One toggle always stays pressed.

Appearance

This root starts dark; the switch reads its current theme.

Auto follows the system light or dark setting.

Preview

<div data-plf-root data-plf-theme="dark">
  <div class="card">
    <div class="card-header">
      <h4 class="card-title">Appearance</h4>
      <p class="card-description">This root starts dark; the switch reads its current theme.</p>
    </div>
    <div class="card-body flex flex-col gap-4">
      <div class="flex flex-wrap gap-2" role="group" aria-label="Appearance theme" data-plf-toggle-group data-plf-theme-switch hidden>
        <button class="btn btn-outline" value="light">Light</button>
        <button class="btn btn-outline" value="dark" aria-pressed="true">Dark</button>
        <button class="btn btn-outline" value="auto">Auto</button>
      </div>
      <p class="card-description">Auto follows the system light or dark setting.</p>
      <div class="flex flex-wrap items-center gap-4">
        <button class="btn btn-primary">Publish</button>
        <button class="btn btn-outline">Cancel</button>
        <span class="badge badge-outline">Preview</span>
      </div>
    </div>
  </div>
</div>

<div data-plf-root data-plf-theme="dark">
  <div class="plf:card">
    <div class="plf:card-header">
      <h4 class="plf:card-title">Appearance</h4>
      <p class="plf:card-description">This root starts dark; the switch reads its current theme.</p>
    </div>
    <div class="plf:card-body plf:flex plf:flex-col plf:gap-4">
      <div class="plf:flex plf:flex-wrap plf:gap-2" role="group" aria-label="Appearance theme" data-plf-toggle-group data-plf-theme-switch hidden>
        <button class="plf:btn plf:btn-outline" value="light">Light</button>
        <button class="plf:btn plf:btn-outline" value="dark" aria-pressed="true">Dark</button>
        <button class="plf:btn plf:btn-outline" value="auto">Auto</button>
      </div>
      <p class="plf:card-description">Auto follows the system light or dark setting.</p>
      <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
        <button class="plf:btn plf:btn-primary">Publish</button>
        <button class="plf:btn plf:btn-outline">Cancel</button>
        <span class="plf:badge plf:badge-outline">Preview</span>
      </div>
    </div>
  </div>
</div>

'use client';

import { Badge, Button, Card, CardBody, CardDescription, CardHeader, CardTitle, ToggleGroup, ToggleGroupItem, useTheme } from '@pelatform/react';

export function Example() {
  const [theme, setTheme, ref] = useTheme({ defaultValue: 'dark' });
  return (
    <div data-plf-root data-plf-theme="dark">
      <Card>
        <CardHeader>
          <CardTitle level={4}>Appearance</CardTitle>
          <CardDescription>This root starts dark; the switch reads its current theme.</CardDescription>
        </CardHeader>
        <CardBody className="flex flex-col gap-4">
          <ToggleGroup ref={ref} className="flex flex-wrap gap-2" aria-label="Appearance theme" value={theme} onValueChange={setTheme}>
            <ToggleGroupItem variant="outline" value="light">Light</ToggleGroupItem>
            <ToggleGroupItem variant="outline" value="dark">Dark</ToggleGroupItem>
            <ToggleGroupItem variant="outline" value="auto">Auto</ToggleGroupItem>
          </ToggleGroup>
          <CardDescription>Auto follows the system light or dark setting.</CardDescription>
          <div className="flex flex-wrap items-center gap-4">
            <Button color="primary">Publish</Button>
            <Button variant="outline">Cancel</Button>
            <Badge variant="outline">Preview</Badge>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

'use client';

import { Badge, Button, Card, CardBody, CardDescription, CardHeader, CardTitle, ToggleGroup, ToggleGroupItem, useTheme } from '@pelatform/react/prefixed';

export function Example() {
  const [theme, setTheme, ref] = useTheme({ defaultValue: 'dark' });
  return (
    <div data-plf-root data-plf-theme="dark">
      <Card>
        <CardHeader>
          <CardTitle level={4}>Appearance</CardTitle>
          <CardDescription>This root starts dark; the switch reads its current theme.</CardDescription>
        </CardHeader>
        <CardBody className="plf:flex plf:flex-col plf:gap-4">
          <ToggleGroup ref={ref} className="plf:flex plf:flex-wrap plf:gap-2" aria-label="Appearance theme" value={theme} onValueChange={setTheme}>
            <ToggleGroupItem variant="outline" value="light">Light</ToggleGroupItem>
            <ToggleGroupItem variant="outline" value="dark">Dark</ToggleGroupItem>
            <ToggleGroupItem variant="outline" value="auto">Auto</ToggleGroupItem>
          </ToggleGroup>
          <CardDescription>Auto follows the system light or dark setting.</CardDescription>
          <div className="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
            <Button color="primary">Publish</Button>
            <Button variant="outline">Cancel</Button>
            <Badge variant="outline">Preview</Badge>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

Native select

Theme

A native select suits settings forms and small screens.

The select shows the root theme when the page loads.

Preview

<div data-plf-root data-plf-theme="auto">
  <div class="card">
    <div class="card-header">
      <h4 class="card-title" id="theme-switch-select-title">Theme</h4>
      <p class="card-description">A native select suits settings forms and small screens.</p>
    </div>
    <div class="card-body flex flex-col gap-4">
      <select class="select" aria-labelledby="theme-switch-select-title" data-plf-theme-switch hidden>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="auto">Auto (system)</option>
      </select>
      <p class="card-description">The select shows the root theme when the page loads.</p>
      <div class="flex flex-wrap items-center gap-4">
        <button class="btn btn-primary">Save settings</button>
        <button class="btn btn-outline">Cancel</button>
        <span class="badge badge-outline">Preview</span>
      </div>
    </div>
  </div>
</div>

<div data-plf-root data-plf-theme="auto">
  <div class="plf:card">
    <div class="plf:card-header">
      <h4 class="plf:card-title" id="theme-switch-select-title">Theme</h4>
      <p class="plf:card-description">A native select suits settings forms and small screens.</p>
    </div>
    <div class="plf:card-body plf:flex plf:flex-col plf:gap-4">
      <select class="plf:select" aria-labelledby="theme-switch-select-title" data-plf-theme-switch hidden>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="auto">Auto (system)</option>
      </select>
      <p class="plf:card-description">The select shows the root theme when the page loads.</p>
      <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
        <button class="plf:btn plf:btn-primary">Save settings</button>
        <button class="plf:btn plf:btn-outline">Cancel</button>
        <span class="plf:badge plf:badge-outline">Preview</span>
      </div>
    </div>
  </div>
</div>

'use client';

import { Badge, Button, Card, CardBody, CardDescription, CardHeader, CardTitle, Select, useTheme } from '@pelatform/react';

export function Example() {
  const [theme, setTheme, ref] = useTheme({ defaultValue: 'auto' });
  return (
    <div data-plf-root data-plf-theme="auto">
      <Card>
        <CardHeader>
          <CardTitle level={4} id="theme-switch-select-title">Theme</CardTitle>
          <CardDescription>A native select suits settings forms and small screens.</CardDescription>
        </CardHeader>
        <CardBody className="flex flex-col gap-4">
          <Select ref={ref} aria-labelledby="theme-switch-select-title" value={theme} onValueChange={setTheme}>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="auto">Auto (system)</option>
          </Select>
          <CardDescription>The select shows the root theme when the page loads.</CardDescription>
          <div className="flex flex-wrap items-center gap-4">
            <Button color="primary">Save settings</Button>
            <Button variant="outline">Cancel</Button>
            <Badge variant="outline">Preview</Badge>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

'use client';

import { Badge, Button, Card, CardBody, CardDescription, CardHeader, CardTitle, Select, useTheme } from '@pelatform/react/prefixed';

export function Example() {
  const [theme, setTheme, ref] = useTheme({ defaultValue: 'auto' });
  return (
    <div data-plf-root data-plf-theme="auto">
      <Card>
        <CardHeader>
          <CardTitle level={4} id="theme-switch-select-title">Theme</CardTitle>
          <CardDescription>A native select suits settings forms and small screens.</CardDescription>
        </CardHeader>
        <CardBody className="plf:flex plf:flex-col plf:gap-4">
          <Select ref={ref} aria-labelledby="theme-switch-select-title" value={theme} onValueChange={setTheme}>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="auto">Auto (system)</option>
          </Select>
          <CardDescription>The select shows the root theme when the page loads.</CardDescription>
          <div className="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
            <Button color="primary">Save settings</Button>
            <Button variant="outline">Cancel</Button>
            <Badge variant="outline">Preview</Badge>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

Control outside the root

Switches for the same root stay in sync.

Workspace preview

Both switches change this root and stay in sync.

Preview

<div class="flex flex-col gap-4">
  <div class="flex flex-wrap gap-2" role="group" aria-label="Workspace preview theme" data-plf-toggle-group data-plf-theme-switch data-plf-target="theme-switch-target-root" hidden>
    <button class="btn btn-ghost btn-square" value="light" aria-pressed="true" aria-label="Light theme"></button>
    <button class="btn btn-ghost btn-square" value="dark" aria-label="Dark theme"></button>
    <button class="btn btn-ghost btn-square" value="auto" aria-label="Auto theme"></button>
  </div>
  <div data-plf-root data-plf-theme="light" id="theme-switch-target-root">
    <div class="card">
      <div class="card-header">
        <div class="flex flex-wrap gap-4 justify-between items-center">
          <h4 class="card-title">Workspace preview</h4>
          <div class="flex flex-wrap gap-2" role="group" aria-label="Workspace theme" data-plf-toggle-group data-plf-theme-switch hidden>
            <button class="btn btn-ghost btn-square" value="light" aria-pressed="true" aria-label="Light theme"></button>
            <button class="btn btn-ghost btn-square" value="dark" aria-label="Dark theme"></button>
            <button class="btn btn-ghost btn-square" value="auto" aria-label="Auto theme"></button>
          </div>
        </div>
      </div>
      <div class="card-body flex flex-col gap-4">
        <p class="card-description">Both switches change this root and stay in sync.</p>
        <div class="flex flex-wrap items-center gap-4">
          <button class="btn btn-primary">Invite</button>
          <button class="btn btn-outline">Cancel</button>
          <span class="badge badge-outline">Preview</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="plf:flex plf:flex-col plf:gap-4">
  <div class="plf:flex plf:flex-wrap plf:gap-2" role="group" aria-label="Workspace preview theme" data-plf-toggle-group data-plf-theme-switch data-plf-target="theme-switch-target-root" hidden>
    <button class="plf:btn plf:btn-ghost plf:btn-square" value="light" aria-pressed="true" aria-label="Light theme"></button>
    <button class="plf:btn plf:btn-ghost plf:btn-square" value="dark" aria-label="Dark theme"></button>
    <button class="plf:btn plf:btn-ghost plf:btn-square" value="auto" aria-label="Auto theme"></button>
  </div>
  <div data-plf-root data-plf-theme="light" id="theme-switch-target-root">
    <div class="plf:card">
      <div class="plf:card-header">
        <div class="plf:flex plf:flex-wrap plf:gap-4 plf:justify-between plf:items-center">
          <h4 class="plf:card-title">Workspace preview</h4>
          <div class="plf:flex plf:flex-wrap plf:gap-2" role="group" aria-label="Workspace theme" data-plf-toggle-group data-plf-theme-switch hidden>
            <button class="plf:btn plf:btn-ghost plf:btn-square" value="light" aria-pressed="true" aria-label="Light theme"></button>
            <button class="plf:btn plf:btn-ghost plf:btn-square" value="dark" aria-label="Dark theme"></button>
            <button class="plf:btn plf:btn-ghost plf:btn-square" value="auto" aria-label="Auto theme"></button>
          </div>
        </div>
      </div>
      <div class="plf:card-body plf:flex plf:flex-col plf:gap-4">
        <p class="plf:card-description">Both switches change this root and stay in sync.</p>
        <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
          <button class="plf:btn plf:btn-primary">Invite</button>
          <button class="plf:btn plf:btn-outline">Cancel</button>
          <span class="plf:badge plf:badge-outline">Preview</span>
        </div>
      </div>
    </div>
  </div>
</div>

'use client';

import { useRef } from 'react';
import { Badge, Button, Card, CardBody, CardDescription, CardHeader, CardTitle, ToggleGroup, ToggleGroupItem, useTheme } from '@pelatform/react';

export function Example() {
  const root = useRef<HTMLDivElement>(null);
  const [outside, setOutside] = useTheme({ target: root });
  const [inside, setInside, ref] = useTheme();
  return (
    <div className="flex flex-col gap-4">
      <ToggleGroup className="flex flex-wrap gap-2" aria-label="Workspace preview theme" value={outside} onValueChange={setOutside}>
        <ToggleGroupItem shape="square" value="light" aria-label="Light theme" />
        <ToggleGroupItem shape="square" value="dark" aria-label="Dark theme" />
        <ToggleGroupItem shape="square" value="auto" aria-label="Auto theme" />
      </ToggleGroup>
      <div ref={root} data-plf-root data-plf-theme="light">
        <Card>
          <CardHeader>
            <div className="flex flex-wrap gap-4 justify-between items-center">
              <CardTitle level={4}>Workspace preview</CardTitle>
              <ToggleGroup ref={ref} className="flex flex-wrap gap-2" aria-label="Workspace theme" value={inside} onValueChange={setInside}>
                <ToggleGroupItem shape="square" value="light" aria-label="Light theme" />
                <ToggleGroupItem shape="square" value="dark" aria-label="Dark theme" />
                <ToggleGroupItem shape="square" value="auto" aria-label="Auto theme" />
              </ToggleGroup>
            </div>
          </CardHeader>
          <CardBody className="flex flex-col gap-4">
            <CardDescription>Both switches change this root and stay in sync.</CardDescription>
            <div className="flex flex-wrap items-center gap-4">
              <Button color="primary">Invite</Button>
              <Button variant="outline">Cancel</Button>
              <Badge variant="outline">Preview</Badge>
            </div>
          </CardBody>
        </Card>
      </div>
    </div>
  );
}

'use client';

import { useRef } from 'react';
import { Badge, Button, Card, CardBody, CardDescription, CardHeader, CardTitle, ToggleGroup, ToggleGroupItem, useTheme } from '@pelatform/react/prefixed';

export function Example() {
  const root = useRef<HTMLDivElement>(null);
  const [outside, setOutside] = useTheme({ target: root });
  const [inside, setInside, ref] = useTheme();
  return (
    <div className="plf:flex plf:flex-col plf:gap-4">
      <ToggleGroup className="plf:flex plf:flex-wrap plf:gap-2" aria-label="Workspace preview theme" value={outside} onValueChange={setOutside}>
        <ToggleGroupItem shape="square" value="light" aria-label="Light theme" />
        <ToggleGroupItem shape="square" value="dark" aria-label="Dark theme" />
        <ToggleGroupItem shape="square" value="auto" aria-label="Auto theme" />
      </ToggleGroup>
      <div ref={root} data-plf-root data-plf-theme="light">
        <Card>
          <CardHeader>
            <div className="plf:flex plf:flex-wrap plf:gap-4 plf:justify-between plf:items-center">
              <CardTitle level={4}>Workspace preview</CardTitle>
              <ToggleGroup ref={ref} className="plf:flex plf:flex-wrap plf:gap-2" aria-label="Workspace theme" value={inside} onValueChange={setInside}>
                <ToggleGroupItem shape="square" value="light" aria-label="Light theme" />
                <ToggleGroupItem shape="square" value="dark" aria-label="Dark theme" />
                <ToggleGroupItem shape="square" value="auto" aria-label="Auto theme" />
              </ToggleGroup>
            </div>
          </CardHeader>
          <CardBody className="plf:flex plf:flex-col plf:gap-4">
            <CardDescription>Both switches change this root and stay in sync.</CardDescription>
            <div className="plf:flex plf:flex-wrap plf:items-center plf:gap-4">
              <Button color="primary">Invite</Button>
              <Button variant="outline">Cancel</Button>
              <Badge variant="outline">Preview</Badge>
            </div>
          </CardBody>
        </Card>
      </div>
    </div>
  );
}

Theme Switch stores nothing: apply the saved theme with an inline script right after the root’s opening tag, and save each change under a key of your own, such as plf-theme, as the site’s other scripts share localStorage.

HTML

<div data-plf-root data-plf-theme="auto" id="app">
  <script>
    try { const theme = localStorage.getItem('plf-theme'); if (theme) document.getElementById('app').dataset.plfTheme = theme; } catch {}
  </script>
</div>

<script>
  document.addEventListener('plf:theme-switch:change', event => {
    if (event.detail.root.id === 'app') try { localStorage.setItem('plf-theme', event.detail.value); } catch {}
  });
</script>

In React, onValueChange saves each change. A root that React renders on the server takes the same script, and suppressHydrationWarning keeps the theme it applies:

React

'use client';

import type { ReactNode } from 'react';
import { ThemeSwitch } from '@pelatform/react';

const restore = "try { const theme = localStorage.getItem('plf-theme'); if (theme) document.getElementById('app').dataset.plfTheme = theme; } catch {}";

export function App({ children }: { children: ReactNode }) {
  return (
    <div data-plf-root data-plf-theme="auto" id="app" suppressHydrationWarning>
      <script dangerouslySetInnerHTML={{ __html: restore }} />
      <ThemeSwitch defaultValue="auto" onValueChange={theme => { try { localStorage.setItem('plf-theme', theme); } catch {} }} />
      {children}
    </div>
  );
}

JavaScript

Theme Switch needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/form.min.css">
<link rel="stylesheet" href="components/card.min.css">
<link rel="stylesheet" href="components/badge.min.css">
<link rel="stylesheet" href="components/dropdown-menu.min.css">
<link rel="stylesheet" href="components/button-group.min.css">
<link rel="stylesheet" href="components/toggle.min.css">
<link rel="stylesheet" href="components/toggle-group.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/dropdown-menu.min.js" defer></script>
<script src="components/toggle-group.min.js" defer></script>
<script src="components/theme-switch.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/form.prefixed.min.css">
<link rel="stylesheet" href="components/card.prefixed.min.css">
<link rel="stylesheet" href="components/badge.prefixed.min.css">
<link rel="stylesheet" href="components/dropdown-menu.prefixed.min.css">
<link rel="stylesheet" href="components/button-group.prefixed.min.css">
<link rel="stylesheet" href="components/toggle.prefixed.min.css">
<link rel="stylesheet" href="components/toggle-group.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/dropdown-menu.min.js" defer></script>
<script src="components/toggle-group.min.js" defer></script>
<script src="components/theme-switch.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`data-plf-theme-switch`	On a Dropdown Menu, a single Toggle Group or a native `<select>`, authored `hidden`
`value`	`light`, `dark` or `auto` on each menu item, toggle or option; each value once. Items and toggles draw the theme’s icon
`data-plf-target`	The id of the `data-plf-root` to change; by default, the root that holds the switch
`data-plf-theme-switch-icon`	`light`, `dark` or `auto` on each icon in the menu trigger

Methods

Method	Behavior
`PLF.ThemeSwitch.getOrCreateInstance(element)`	Returns the instance, creating it for valid markup
`PLF.ThemeSwitch.getInstance(element)`	Returns the instance or `null`
`instance.getValue()`	Returns the root’s theme: `light`, `dark` or `auto`
`instance.setValue(theme)`	Sets an offered theme; returns `false` when unchanged, not offered or canceled
`instance.destroy()`	Removes listeners and hides the control again; the theme stays

Events

Event	When
`plf:theme-switch:before-change`	Before the switch changes the root; cancelable
`plf:theme-switch:change`	After the root’s `data-plf-theme` changes

Each event’s detail:

Property	Value
`instance`	The Theme Switch instance
`value`	The new theme: `light`, `dark` or `auto`
`previous`	The root’s theme before the change
`root`	The `data-plf-root` element the switch changes
`reason`	`trigger` or `api`
`trigger`	The menu item, toggle or select that chose the theme, or `null` from a method

Keyboard

Control	Keys
Menu	As in Dropdown Menu
Toggle group	As in Toggle Group
Select	The native select keys

React

ThemeSwitch from @pelatform/react renders the menu, which changes the theme of the root around it; useTheme() keeps a root’s theme for a Toggle Group, a Select or another control of your own.

Prop	Values	Default
`defaultValue`	`light`, `dark` or `auto`: the root’s `data-plf-theme`, which the trigger shows until it reads the root, as in server markup	`light`
`onValueChange`	`(theme)`, called after a chosen item changes the root, such as to save it	None
`target`	The root to change, as a ref or the element, for a switch outside it	The root around the switch
`label`	The trigger’s name, which the current theme’s name follows	`Color theme`
`lightLabel`, `darkLabel`, `autoLabel`	The items’ names	`Light`, `Dark`, `Auto`

The other props are Dropdown Menu’s, such as align, and the element’s own, className and ref included.

useTheme() takes the same defaultValue, target and onValueChange, which it calls after setTheme changes the root, and returns [theme, setTheme, ref]:

Returns	Value
`theme`	The root’s theme, which follows its `data-plf-theme` when another switch or the page changes it
`setTheme`	`setTheme(theme)` sets the root’s theme; another value, such as a released toggle’s `''`, changes nothing, so one toggle stays pressed
`ref`	On your control inside the root; without `target`, the hook changes the root around it