# ThemeToggle

`ThemeToggle` switches the shared document between light and dark themes and synchronizes the saved preference.

## Usage

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

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

<ThemeToggle />
```

## Notes

- 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.

## Parameters

None.

## Accessibility

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.