llm-multiverse/llm-multiverse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark/light theme toggle with system preference support (#18)

Browse Source 
Add theme switching with three modes (system/light/dark) using Tailwind v4
class-based dark mode. Theme preference is persisted in localStorage and
defaults to the system's prefers-color-scheme. All components updated with
dark: variants for consistent dark mode rendering including SVG elements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-12 12:54:04 +01:00
parent 79c14378a2
commit 60f3d8eeda
22 changed files with 418 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/routes/chat/+page.svelte
View File

@@ -15,6 +15,7 @@
import FinalResult from '$lib/components/FinalResult.svelte';
import SessionSidebar from '$lib/components/SessionSidebar.svelte';
import ConfigSidebar from '$lib/components/ConfigSidebar.svelte';
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
import { processRequest, OrchestratorError } from '$lib/services/orchestrator';
import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
import { sessionStore } from '$lib/stores/sessions.svelte';
@@ -153,7 +154,7 @@
const idx = messages.length - 1;
messages[idx] = {
...messages[idx],
content: `⚠ ${msg}`
content: `\u26A0 ${msg}`
};
} finally {
isStreaming = false;
@@ -162,38 +163,39 @@
}
</script>
<div class="flex h-screen">
<div class="flex h-screen bg-white dark:bg-gray-900">
<SessionSidebar onSelectSession={handleSelectSession} onNewChat={handleNewChat} />
<div class="flex flex-1 flex-col">
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3">
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Chat</h1>
<div class="flex items-center gap-2">
<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
<a
href={lineageHref}
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
>
Lineage
</a>
<a
href={memoryHref}
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
>
Memory
</a>
<a
href={auditHref}
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
>
Audit
</a>
<!-- eslint-enable svelte/no-navigation-without-resolve -->
<ThemeToggle />
<button
type="button"
onclick={() => (showConfig = !showConfig)}
class="flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-sm
{showConfig ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
{showConfig ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}"
>
{#if isNonDefaultConfig}
<span class="h-2 w-2 rounded-full bg-amber-500"></span>
@@ -212,14 +214,14 @@
{#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}
<div class="flex justify-start px-4 pb-2">
<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 px-4 py-2.5">
<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:0ms]"
<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 dark:bg-gray-700 px-4 py-2.5">
<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400 [animation-delay:0ms]"
></span>
<span
class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:150ms]"
class="h-2 w-2 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400 [animation-delay:150ms]"
></span>
<span
class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:300ms]"
class="h-2 w-2 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400 [animation-delay:300ms]"
></span>
</div>
</div>
@@ -230,7 +232,7 @@
{/if}
{#if error}
<div class="mx-4 mb-2 rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">
<div class="mx-4 mb-2 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-2 text-sm text-red-600 dark:text-red-400">
{error}
</div>
{/if}