diff --git a/webui/src/web-components/sketch-theme-toggle.ts b/webui/src/web-components/sketch-theme-toggle.ts
new file mode 100644
index 0000000..7e428fa
--- /dev/null
+++ b/webui/src/web-components/sketch-theme-toggle.ts
@@ -0,0 +1,100 @@
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element.js";
+import { ThemeService, ThemeMode } from "./theme-service.js";
+
+@customElement("sketch-theme-toggle")
+export class SketchThemeToggle extends SketchTailwindElement {
+  @state() private currentTheme: ThemeMode = "system";
+  @state() private effectiveTheme: "light" | "dark" = "light";
+
+  private themeService = ThemeService.getInstance();
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateThemeState();
+
+    // Listen for theme changes from other sources
+    document.addEventListener("theme-changed", this.handleThemeChange);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("theme-changed", this.handleThemeChange);
+  }
+
+  private handleThemeChange = (e: CustomEvent) => {
+    this.currentTheme = e.detail.theme;
+    this.effectiveTheme = e.detail.effectiveTheme;
+  };
+
+  private updateThemeState() {
+    this.currentTheme = this.themeService.getTheme();
+    this.effectiveTheme = this.themeService.getEffectiveTheme();
+  }
+
+  private toggleTheme() {
+    this.themeService.toggleTheme();
+  }
+
+  private getThemeIcon(): string {
+    switch (this.currentTheme) {
+      case "light":
+        return "\u2600\ufe0f"; // Sun
+      case "dark":
+        return "\ud83c\udf19"; // Moon
+      case "system":
+        return "\ud83d\udcbb"; // Computer/Laptop
+      default:
+        return "\ud83d\udcbb";
+    }
+  }
+
+  private getThemeLabel(): string {
+    switch (this.currentTheme) {
+      case "light":
+        return "Light mode";
+      case "dark":
+        return "Dark mode";
+      case "system":
+        return `System theme (${this.effectiveTheme})`;
+      default:
+        return "System theme";
+    }
+  }
+
+  private getNextThemeLabel(): string {
+    switch (this.currentTheme) {
+      case "light":
+        return "Switch to dark mode";
+      case "dark":
+        return "Switch to system theme";
+      case "system":
+        return "Switch to light mode";
+      default:
+        return "Switch theme";
+    }
+  }
+
+  render() {
+    return html`
+      <button
+        @click=${this.toggleTheme}
+        class="p-2 rounded-md border border-gray-300 dark:border-gray-600 
+               bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200
+               hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors
+               focus:outline-none focus:ring-2 focus:ring-blue-500"
+        title="${this.getThemeLabel()} - ${this.getNextThemeLabel()}"
+        aria-label="${this.getNextThemeLabel()}"
+      >
+        ${this.getThemeIcon()}
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-theme-toggle": SketchThemeToggle;
+  }
+}