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/Dashboard.svelte
+16 -16
View File
@@ -40,21 +40,21 @@
<div class="space-y-8">
<div>
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Overview</h1>
<h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Overview</h1>
<p class="text-sm text-surface-400 mt-1">System status at a glance</p>
</div>
{#if loading}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{#each Array(4) as _}
<div class="h-[120px] rounded-xl bg-surface-100 animate-pulse"></div>
<div class="h-[120px] rounded-xl bg-surface-100 dark:bg-surface-800 animate-pulse"></div>
{/each}
</div>
{:else}
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- CPU -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-center justify-between mb-3">
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">CPU</p>
<div class="w-8 h-8 rounded-lg bg-sky-50 flex items-center justify-center">
@@ -66,7 +66,7 @@
</div>
<!-- Memory -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-center justify-between mb-3">
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Memory</p>
<div class="w-8 h-8 rounded-lg bg-violet-50 flex items-center justify-center">
@@ -78,7 +78,7 @@
</div>
<!-- Disk -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-center justify-between mb-3">
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Disk</p>
<div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
@@ -90,14 +90,14 @@
</div>
<!-- Uptime -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-center justify-between mb-3">
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Uptime</p>
<div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center">
<svg class="w-4 h-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
</div>
</div>
<p class="text-2xl font-bold text-surface-800">{stats?.uptime || "—"}</p>
<p class="text-2xl font-bold text-surface-800 dark:text-surface-100">{stats?.uptime || "—"}</p>
<p class="text-xs text-surface-400 mt-1 truncate" title={stats?.platform}>{stats?.platform || "—"}</p>
</div>
</div>
@@ -105,9 +105,9 @@
<!-- Services Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<!-- Docker Summary -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-surface-700">Docker Containers</h3>
<h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Docker Containers</h3>
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">{containers.filter(c => c.status === "running").length}/{containers.length} running</span>
</div>
<div class="space-y-2">
@@ -115,7 +115,7 @@
<div class="flex items-center justify-between py-1.5 text-sm">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full {c.status !== 'running' ? 'bg-surface-300' : c.health === 'unhealthy' ? 'bg-rose-400' : c.health === 'healthy' ? 'bg-emerald-400' : 'bg-sky-400'}"></span>
<span class="font-medium text-surface-700">{c.name}</span>
<span class="font-medium text-surface-700 dark:text-surface-200">{c.name}</span>
</div>
<span class="text-xs text-surface-400 truncate max-w-[180px]">{c.image}</span>
</div>
@@ -127,9 +127,9 @@
</div>
<!-- Repos Summary -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-surface-700">Git Repositories</h3>
<h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Git Repositories</h3>
<span class="text-xs font-medium text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">{repos.length} repos</span>
</div>
<div class="space-y-2">
@@ -137,7 +137,7 @@
<div class="flex items-center justify-between py-1.5 text-sm">
<div class="flex items-center gap-2">
<svg class="w-3.5 h-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
<span class="font-medium text-surface-700">{r.name}</span>
<span class="font-medium text-surface-700 dark:text-surface-200">{r.name}</span>
</div>
<span class="text-xs text-surface-400">{r.language || "—"}</span>
</div>
@@ -151,8 +151,8 @@
<!-- Storage Usage -->
{#if stats?.volumes?.length}
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
<h3 class="text-sm font-semibold text-surface-700 mb-3">Storage Usage</h3>
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
<h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200 mb-3">Storage Usage</h3>
<div class="space-y-3">
{#each stats.volumes as vol}
<div>
@@ -160,7 +160,7 @@
<span class="font-medium">{vol.mount}</span>
<span>{vol.percent}%</span>
</div>
<div class="w-full h-3 bg-surface-100 rounded-full overflow-hidden">
<div class="w-full h-3 bg-surface-100 dark:bg-surface-700 rounded-full overflow-hidden">
<div
class="h-full rounded-full transition-all duration-700 ease-out {vol.percent > 90 ? 'bg-gradient-to-r from-rose-400 to-rose-500' : vol.percent > 70 ? 'bg-gradient-to-r from-amber-400 to-amber-500' : 'bg-gradient-to-r from-emerald-400 to-emerald-500'}"
style="width: {vol.percent}%"