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

30
src/lib/components/AuditTimeline.svelte
View File

@@ -14,15 +14,15 @@
function typeBadgeClasses(eventType: string): string {
switch (eventType) {
case 'state_change':
return 'bg-blue-100 text-blue-700';
return 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300';
case 'tool_invocation':
return 'bg-green-100 text-green-700';
return 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300';
case 'error':
return 'bg-red-100 text-red-700';
return 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300';
case 'message':
return 'bg-gray-100 text-gray-600';
return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400';
default:
return 'bg-gray-100 text-gray-600';
return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400';
}
}
@@ -59,14 +59,14 @@
{#if events.length === 0}
<div class="flex flex-col items-center justify-center py-16 text-center">
<div class="mb-3 text-4xl text-gray-300">&#128196;</div>
<p class="text-sm font-medium text-gray-500">No events for this session</p>
<p class="mt-1 text-xs text-gray-400">Events will appear here as orchestration runs.</p>
<div class="mb-3 text-4xl text-gray-300 dark:text-gray-600">&#128196;</div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">No events for this session</p>
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Events will appear here as orchestration runs.</p>
</div>
{:else}
<div class="relative ml-4">
<!-- Vertical line -->
<div class="absolute top-0 bottom-0 left-3 w-0.5 bg-gray-200"></div>
<div class="absolute top-0 bottom-0 left-3 w-0.5 bg-gray-200 dark:bg-gray-700"></div>
<ol class="space-y-4">
{#each events as event, i (event.id)}
@@ -74,34 +74,34 @@
{#if showDate}
<li class="relative pl-10 pt-2">
<span class="text-xs font-medium text-gray-400">{formatDate(event.timestamp)}</span>
<span class="text-xs font-medium text-gray-400 dark:text-gray-500">{formatDate(event.timestamp)}</span>
</li>
{/if}
<li class="group relative flex items-start pl-10">
<!-- Dot on the timeline -->
<div
class="absolute left-1.5 top-1.5 h-3 w-3 rounded-full ring-2 ring-white {typeDotClasses(event.eventType)}"
class="absolute left-1.5 top-1.5 h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-900 {typeDotClasses(event.eventType)}"
></div>
<!-- Event card -->
<div
class="flex-1 rounded-lg border border-gray-200 bg-white px-4 py-3 shadow-sm transition-shadow group-hover:shadow-md"
class="flex-1 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 shadow-sm transition-shadow group-hover:shadow-md"
>
<div class="flex flex-wrap items-center gap-2">
<span class="text-xs text-gray-400">{formatTimestamp(event.timestamp)}</span>
<span class="text-xs text-gray-400 dark:text-gray-500">{formatTimestamp(event.timestamp)}</span>
<span
class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {typeBadgeClasses(event.eventType)}"
>
{typeLabel(event.eventType)}
</span>
{#if event.state}
<span class="rounded-md bg-blue-50 px-1.5 py-0.5 text-xs font-mono text-blue-600">
<span class="rounded-md bg-blue-50 dark:bg-blue-900/30 px-1.5 py-0.5 text-xs font-mono text-blue-600 dark:text-blue-400">
{event.state}
</span>
{/if}
</div>
<p class="mt-1.5 text-sm text-gray-700">{event.details}</p>
<p class="mt-1.5 text-sm text-gray-700 dark:text-gray-300">{event.details}</p>
</div>
</li>
{/each}