diff options
| author | Adam Malczewski <[email protected]> | 2026-05-19 19:40:21 +0900 |
|---|---|---|
| committer | Adam Malczewski <[email protected]> | 2026-05-19 19:40:21 +0900 |
| commit | f78a91c20f658dd404277919a0b872b352c99bb6 (patch) | |
| tree | 58cfffb655da4443f4b7a39543b86f988f15239f /packages/frontend/src/lib/components/ThemeSwitcher.svelte | |
| download | dispatch-main.tar.gz dispatch-main.zip | |
- Bun monorepo with @dispatch/core, @dispatch/api, @dispatch/frontend
- Agent runtime with Vercel AI SDK, streaming via WebSocket
- Tools: read_file, write_file, list_files (scoped to working directory)
- Hono API server with POST /chat, GET /status, GET /health, WS /ws
- Svelte 5 + DaisyUI frontend with chat UI, theme switcher, copy button
- OpenCode Go (Zen) as LLM provider, deepseek-v4-flash-free model
- Docker setup (dev + prod) with bin/ scripts and gopass secrets
- Biome v2 linting/formatting, Vitest tests (44 passing)
- Debug info attached to error messages for diagnostics
Diffstat (limited to 'packages/frontend/src/lib/components/ThemeSwitcher.svelte')
| -rw-r--r-- | packages/frontend/src/lib/components/ThemeSwitcher.svelte | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/packages/frontend/src/lib/components/ThemeSwitcher.svelte b/packages/frontend/src/lib/components/ThemeSwitcher.svelte new file mode 100644 index 0000000..6984e3f --- /dev/null +++ b/packages/frontend/src/lib/components/ThemeSwitcher.svelte @@ -0,0 +1,65 @@ +<script lang="ts"> +const THEMES = [ + "light", + "dark", + "dracula", + "night", + "nord", + "sunset", + "cyberpunk", + "forest", + "cmyk", + "coffee", + "caramellatte", +] as const; + +const STORAGE_KEY = "dispatch-theme"; + +const { onclose }: { onclose: () => void } = $props(); + +let currentTheme = $state( + (typeof localStorage !== "undefined" && localStorage.getItem(STORAGE_KEY)) || "dark", +); + +function selectTheme(theme: string) { + currentTheme = theme; + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem(STORAGE_KEY, theme); + onclose(); +} +</script> + +<!-- Backdrop --> +<div + class="fixed inset-0 z-40 bg-black/40" + role="button" + tabindex="0" + onclick={onclose} + onkeydown={(e) => e.key === "Escape" && onclose()} + aria-label="Close theme switcher" +></div> + +<!-- Modal --> +<div + class="fixed top-16 right-4 z-50 bg-base-100 border border-base-300 rounded-xl shadow-xl p-4 w-56" + role="dialog" + aria-label="Theme switcher" +> + <p class="text-sm font-semibold mb-3 text-base-content">Select Theme</p> + <ul class="space-y-1"> + {#each THEMES as theme} + <li> + <button + type="button" + class="w-full text-left px-3 py-1.5 rounded-lg text-sm capitalize hover:bg-base-200 transition-colors {currentTheme === + theme + ? 'bg-primary text-primary-content' + : ''}" + onclick={() => selectTheme(theme)} + > + {theme} + </button> + </li> + {/each} + </ul> +</div> |
