jimmy/nas-tools
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: comprehensive dark mode support across all pages
Deploy Dashboard (Dev) / deploy-dev (push) Successful in 1m11s
Details

Browse Source 
- Fix body/html dark background to surface-950
- Add dark scrollbar styling
- Fix App.svelte wrapper to use Tailwind dark: classes instead of conditional strings
- Add dark:bg-surface-800 and dark:border-surface-700 to all cards in Dashboard, Docker, Files, Gitea
- Add dark text variants for headings, labels, and content text
- Add dark hover states for interactive elements
- Enable cross-category sidebar drag-and-drop
This commit is contained in:
Gan, Jimmy
2026-03-01 14:59:23 +08:00
parent a8debcfb4b
commit 62856c9343
8 changed files with 84 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/routes/Docker.svelte
+7 -7
View File
@@ -36,7 +36,7 @@
<div class="space-y-6">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Docker</h1>
<h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Docker</h1>
<p class="text-sm text-surface-400 mt-1">{containers.length} containers · {containers.filter(c => c.status === "running").length} running</p>
</div>
<button onclick={load} class="text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 px-3 py-1.5 rounded-lg transition-colors">
@@ -47,13 +47,13 @@
{#if loading}
<div class="space-y-3">
{#each Array(5) as _}
<div class="h-[72px] rounded-xl bg-surface-100 animate-pulse"></div>
<div class="h-[72px] rounded-xl bg-surface-100 dark:bg-surface-800 animate-pulse"></div>
{/each}
</div>
{:else}
<div class="space-y-2">
{#each containers as c}
<div class="bg-white rounded-xl border border-surface-200 p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-all duration-200 group">
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-all duration-200 group">
<div class="flex items-center gap-3 min-w-0">
<span class="relative flex h-2.5 w-2.5 shrink-0">
{#if c.status === "running"}
@@ -64,7 +64,7 @@
{/if}
</span>
<div class="min-w-0">
<p class="text-sm font-semibold text-surface-800 truncate">{c.name}</p>
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 truncate">{c.name}</p>
<p class="text-xs text-surface-400 truncate mt-0.5">{c.image}</p>
</div>
</div>
@@ -108,10 +108,10 @@
<!-- Log Modal -->
{#if logTarget}
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50" role="dialog" aria-modal="true" onclick={() => { logTarget = ""; logContent = ""; }} onkeydown={(e) => e.key === "Escape" && (logTarget = "", logContent = "")}>
<div class="bg-white rounded-2xl shadow-2xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col" role="document" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
<div class="flex items-center justify-between px-5 py-4 border-b border-surface-200">
<div class="bg-white dark:bg-surface-800 rounded-2xl shadow-2xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col" role="document" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
<div class="flex items-center justify-between px-5 py-4 border-b border-surface-200 dark:border-surface-700">
<div>
<h3 class="text-sm font-bold text-surface-800">Container Logs</h3>
<h3 class="text-sm font-bold text-surface-800 dark:text-surface-100">Container Logs</h3>
<p class="text-xs text-surface-400 mt-0.5">{logTarget}</p>
</div>
<button aria-label="Close logs" class="text-surface-400 hover:text-surface-600 transition-colors" onclick={() => { logTarget = ""; logContent = ""; }}>