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

44
src/routes/memory/+page.svelte
View File

@@ -2,6 +2,7 @@
import { resolveRoute } from '$app/paths';
import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
import MemoryCandidateCard from '$lib/components/MemoryCandidateCard.svelte';
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
import { memoryStore } from '$lib/stores/memory.svelte';
const chatHref = resolveRoute('/chat');
@@ -37,34 +38,37 @@
];
</script>
<div class="flex h-screen flex-col bg-gray-50">
<div class="flex h-screen flex-col bg-gray-50 dark:bg-gray-900">
<!-- Header -->
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-6 py-3">
<div class="flex items-center gap-4">
<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
<a
href={chatHref}
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"
>
&larr; Chat
</a>
<!-- eslint-enable svelte/no-navigation-without-resolve -->
<h1 class="text-lg font-semibold text-gray-900">Memory Candidates</h1>
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Memory Candidates</h1>
</div>
<div class="flex items-center gap-2">
<ThemeToggle />
<span class="rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
Sample Data
</span>
</div>
<span class="rounded-md bg-amber-50 px-2 py-1 text-xs text-amber-700">
Sample Data
</span>
</header>
<!-- Filters -->
<div class="border-b border-gray-200 bg-white px-6 py-3">
<div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-6 py-3">
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2">
<label for="source-filter" class="text-xs font-medium text-gray-500">Source</label>
<label for="source-filter" class="text-xs font-medium text-gray-500 dark:text-gray-400">Source</label>
<select
id="source-filter"
bind:value={sourceFilter}
class="rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2.5 py-1.5 text-sm text-gray-700 dark:text-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
>
{#each sourceOptions as opt (opt.value)}
<option value={opt.value}>{opt.label}</option>
@@ -73,7 +77,7 @@
</div>
<div class="flex items-center gap-2">
<label for="confidence-threshold" class="text-xs font-medium text-gray-500">
<label for="confidence-threshold" class="text-xs font-medium text-gray-500 dark:text-gray-400">
Min Confidence
</label>
<input
@@ -83,14 +87,14 @@
max="1"
step="0.05"
bind:value={confidenceThreshold}
class="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 accent-blue-600"
class="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700 accent-blue-600"
/>
<span class="w-10 text-right text-xs font-medium text-gray-600">
<span class="w-10 text-right text-xs font-medium text-gray-600 dark:text-gray-400">
{Math.round(confidenceThreshold * 100)}%
</span>
</div>
<span class="text-xs text-gray-400">
<span class="text-xs text-gray-400 dark:text-gray-500">
{totalCandidates} candidate{totalCandidates !== 1 ? 's' : ''}
</span>
</div>
@@ -100,9 +104,9 @@
<main class="flex-1 overflow-auto p-6">
{#if filteredSessions.length === 0}
<div class="flex flex-col items-center justify-center py-16 text-center">
<div class="mb-3 text-4xl text-gray-300">&#128203;</div>
<p class="text-sm font-medium text-gray-500">No memory candidates found</p>
<p class="mt-1 text-xs text-gray-400">
<div class="mb-3 text-4xl text-gray-300 dark:text-gray-600">&#128203;</div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">No memory candidates found</p>
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
{#if sourceFilter !== 'all' || confidenceThreshold > 0}
Try adjusting your filters.
{:else}
@@ -115,10 +119,10 @@
{#each filteredSessions as session (session.sessionId)}
<section>
<div class="mb-3 flex items-center gap-3">
<h2 class="text-sm font-semibold text-gray-900">
Session: <span class="font-mono text-xs text-gray-600">{session.sessionId}</span>
<h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
Session: <span class="font-mono text-xs text-gray-600 dark:text-gray-400">{session.sessionId}</span>
</h2>
<span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">
<span class="rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400">
{session.candidates.length}
</span>
</div>