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

4
src/lib/components/MessageBubble.svelte
View File

@@ -10,10 +10,10 @@
<div
class="max-w-[75%] rounded-2xl px-4 py-2.5 {isUser
? 'bg-blue-600 text-white rounded-br-md'
: 'bg-gray-200 text-gray-900 rounded-bl-md'}"
: 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-bl-md'}"
>
<p class="text-sm whitespace-pre-wrap">{message.content}</p>
<time class="mt-1 block text-xs {isUser ? 'text-blue-200' : 'text-gray-500'}">
<time class="mt-1 block text-xs {isUser ? 'text-blue-200' : 'text-gray-500 dark:text-gray-400'}">
{message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</time>
</div>