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

42
src/routes/audit/+page.svelte
View File

@@ -3,6 +3,7 @@
import { goto } from '$app/navigation';
import { resolveRoute } from '$app/paths';
import AuditTimeline from '$lib/components/AuditTimeline.svelte';
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
import { auditStore } from '$lib/stores/audit.svelte';
import type { AuditEventType } from '$lib/stores/audit.svelte';
@@ -38,30 +39,33 @@
];
</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">Audit Log</h1>
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Audit Log</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="session-select" class="text-xs font-medium text-gray-500">Session</label>
<label for="session-select" class="text-xs font-medium text-gray-500 dark:text-gray-400">Session</label>
<select
id="session-select"
value={selectedSessionId ?? ''}
@@ -69,7 +73,7 @@
const target = e.target as HTMLSelectElement;
if (target.value) selectSession(target.value);
}}
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"
>
<option value="" disabled>Select a session</option>
{#each allSessions as session (session.sessionId)}
@@ -82,11 +86,11 @@
{#if selectedSessionId}
<div class="flex items-center gap-2">
<label for="type-filter" class="text-xs font-medium text-gray-500">Type</label>
<label for="type-filter" class="text-xs font-medium text-gray-500 dark:text-gray-400">Type</label>
<select
id="type-filter"
bind:value={typeFilter}
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 filterOptions as opt (opt.value)}
<option value={opt.value}>{opt.label}</option>
@@ -94,7 +98,7 @@
</select>
</div>
<span class="text-xs text-gray-400">
<span class="text-xs text-gray-400 dark:text-gray-500">
{totalEvents} event{totalEvents !== 1 ? 's' : ''}
</span>
{/if}
@@ -106,17 +110,17 @@
{#if !selectedSessionId}
{#if allSessions.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 audit events recorded</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 audit events recorded</p>
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
Events will appear here as orchestration sessions run.
</p>
</div>
{:else}
<div class="flex flex-col items-center justify-center py-16 text-center">
<div class="mb-3 text-4xl text-gray-300">&#128269;</div>
<p class="text-sm font-medium text-gray-500">Select a session to view its audit log</p>
<p class="mt-1 text-xs text-gray-400">
<div class="mb-3 text-4xl text-gray-300 dark:text-gray-600">&#128269;</div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Select a session to view its audit log</p>
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
Choose a session from the dropdown above.
</p>
</div>