Theme Toggle

Pick a framework. Both use the same recipe, so the styling matches exactly.

Toggles data-theme on the document and persists the choice.

Theme Toggle props for React
Prop	Type	Default	Description
aria-label	string	Switch to dark/light theme	Set your own label if the default does not fit.

Also takes className and children. Anything else passes through to the button.

theme-toggle.demo.tsx

import { ThemeToggle } from "../react/index.js";

export default function ThemeToggleDemo() {
  return (
    <div className="flex items-center gap-3">
      <ThemeToggle />
      <span className="text-sm text-ink-secondary">
        Toggles <code className="font-mono">data-theme</code> on the document
        and persists the choice.
      </span>
    </div>
  );
}

Toggles data-theme on the document and persists the choice.

Theme Toggle props for Svelte
Prop	Type	Default	Description
aria-label	string	Switch to dark/light theme	Set your own label if the default does not fit.

Also takes class and snippet children. Anything else passes through to the button.

theme-toggle.demo.svelte

<script lang="ts">
  import { ThemeToggle } from "../svelte/index.js";
</script>

<div class="flex items-center gap-3">
  <ThemeToggle />
  <span class="text-sm text-ink-secondary">
    Toggles <code class="font-mono">data-theme</code> on the document and persists
    the choice.
  </span>
</div>