ThemeToggle

Load @dg/ui/styles.css once in the root layout.

<script>
  import { ThemeToggle } from "@dg/ui";
</script>

<ThemeToggle />

• Native HTML attributes, DOM callbacks, class and style are forwarded to the switch button; it owns its type, role and click behavior.
• The accessible name and the two tooltips are built-in text in the Page language.
• The capsule uses --radius-full, shared short-motion tokens and focus stroke/color. Its drawing dimensions and optical focus clearance remain local.
• Toggles document.documentElement.dataset.theme, persists dg-theme in localStorage and synchronizes other instances.

None.

The button is a switch with aria-checked. Its name stays stable while checked changes; set Page's lang to translate it. Enter and Space toggle it; reduced motion disables transitions. Page restores the saved theme before first paint; Header already includes a switch by default.