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

48
src/routes/lineage/+page.svelte
View File

@@ -2,6 +2,7 @@
import { resolveRoute } from '$app/paths';
import { AgentType } from '$lib/proto/llm_multiverse/v1/common_pb';
import LineageTree from '$lib/components/LineageTree.svelte';
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
import type { LineageNode, SimpleAgentIdentifier } from '$lib/types/lineage';
import {
buildLineageTree,
@@ -30,23 +31,26 @@
];
</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">Agent Lineage</h1>
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Agent Lineage</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>
<div class="flex flex-1 overflow-hidden">
@@ -55,8 +59,8 @@
<LineageTree nodes={treeNodes} onSelectNode={handleSelectNode} />
<!-- Legend -->
<div class="mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3">
<span class="text-xs font-medium text-gray-500">Agent Types:</span>
<div class="mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent Types:</span>
{#each agentTypeLegend as type (type)}
{@const colors = agentTypeColor(type)}
<span
@@ -76,14 +80,14 @@
{#if selectedNode}
{@const colors = agentTypeColor(selectedNode.agentType)}
<aside
class="w-72 shrink-0 border-l border-gray-200 bg-white p-4 overflow-y-auto"
class="w-72 shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 overflow-y-auto"
>
<div class="mb-4 flex items-center justify-between">
<h2 class="text-sm font-semibold text-gray-900">Agent Details</h2>
<h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Agent Details</h2>
<button
type="button"
onclick={() => (selectedNode = null)}
class="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
class="rounded p-1 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-300"
aria-label="Close detail panel"
>
&#10005;
@@ -92,12 +96,12 @@
<div class="space-y-3">
<div>
<p class="text-xs font-medium text-gray-500">Agent ID</p>
<p class="mt-0.5 break-all font-mono text-sm text-gray-900">{selectedNode.id}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent ID</p>
<p class="mt-0.5 break-all font-mono text-sm text-gray-900 dark:text-gray-100">{selectedNode.id}</p>
</div>
<div>
<p class="text-xs font-medium text-gray-500">Agent Type</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent Type</p>
<span
class="mt-0.5 inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium {colors.badge}"
>
@@ -110,29 +114,29 @@
</div>
<div>
<p class="text-xs font-medium text-gray-500">Spawn Depth</p>
<p class="mt-0.5 text-sm text-gray-900">{selectedNode.spawnDepth}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Spawn Depth</p>
<p class="mt-0.5 text-sm text-gray-900 dark:text-gray-100">{selectedNode.spawnDepth}</p>
</div>
<div>
<p class="text-xs font-medium text-gray-500">Children</p>
<p class="mt-0.5 text-sm text-gray-900">{selectedNode.children.length}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Children</p>
<p class="mt-0.5 text-sm text-gray-900 dark:text-gray-100">{selectedNode.children.length}</p>
</div>
{#if selectedNode.children.length > 0}
<div>
<p class="text-xs font-medium text-gray-500">Child Agents</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Child Agents</p>
<ul class="mt-1 space-y-1">
{#each selectedNode.children as child (child.id)}
{@const childColors = agentTypeColor(child.agentType)}
<li
class="flex items-center gap-2 rounded-md border border-gray-100 px-2 py-1.5"
class="flex items-center gap-2 rounded-md border border-gray-100 dark:border-gray-700 px-2 py-1.5"
>
<span
class="h-2 w-2 shrink-0 rounded-full"
style="background-color: {childColors.stroke}"
></span>
<span class="truncate font-mono text-xs text-gray-700">{child.id}</span>
<span class="truncate font-mono text-xs text-gray-700 dark:text-gray-300">{child.id}</span>
</li>
{/each}
</ul>