<baht-theme-toggle>

Light / dark switch for the 20baht themes. It sets data-baht-theme on <html> (or on the element named by target), so every --baht-* token follows, and saves the choice.

Scoped to a panel

Approve

Back

This demo themes only the panel (target), so it does not fight this site's own theme picker. In your app, drop the target and it themes the whole page.

<div id="tt-demo" style="display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;border-radius:16px;background:var(--baht-color-surface);color:var(--baht-color-text);border:1px solid var(--baht-color-border)">
  <baht-theme-toggle target="#tt-demo" storage-key></baht-theme-toggle>
  <baht-badge tone="success" label="Paid"></baht-badge>
  <baht-button size="sm">Approve</baht-button>
  <baht-button size="sm" variant="secondary">Back</baht-button>
</div>

In your app

<!-- in <head>, before any CSS paints: apply the saved theme so there is no flash -->
<script>
  try {
    var t = localStorage.getItem('baht-theme');
    if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-baht-theme', t);
  } catch (e) {}
</script>

<!-- anywhere, e.g. the app header -->
<baht-theme-toggle></baht-theme-toggle>
<baht-theme-toggle default="system"></baht-theme-toggle> <!-- first visit follows the OS -->

Starting theme: the saved one, else whatever is already on the target, else default. Several toggles (or your own settings page writing the attribute) stay in sync. Listen for baht-theme-change to store the choice server-side too.

Props

Name	Type	Default	Description
`theme`	`ThemeName`	`'light'`	Current theme (light \| dark); setting it applies it without saving
`default`	`ThemeName \| 'system'`	`'light'`	Theme when nothing is saved and the target has none (light \| dark \| system)
`target`	`string`	`''`	CSS selector of the element that carries data-baht-theme
`storage-key`	`string`	`'baht-theme'`	localStorage key for the choice; empty disables saving

Events

Event	detail	Description
`baht-theme-change`	`{ theme }`	The user switched theme
`name`	CustomEvent