fix: comprehensive dark mode support across all pages
Deploy Dashboard (Dev) / deploy-dev (push) Successful in 1m11s
Deploy Dashboard (Dev) / deploy-dev (push) Successful in 1m11s
- 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:
@@ -123,12 +123,12 @@
|
||||
{:else if !authorized}
|
||||
<Login />
|
||||
{:else}
|
||||
<div class="flex h-screen overflow-hidden bg-surface-50 {dark ? 'dark bg-surface-900' : ''}">
|
||||
<div class="flex h-screen overflow-hidden bg-surface-50 dark:bg-surface-900">
|
||||
<Sidebar bind:page {dark} {toggleTheme} {logout} bind:sidebarOpen {allowedPages} {userRole} {sidebarOrder} onOrderChange={handleOrderChange} />
|
||||
<main class="flex-1 overflow-auto">
|
||||
<div class="max-w-[1400px] mx-auto p-6 lg:p-8">
|
||||
<!-- Mobile hamburger -->
|
||||
<button class="md:hidden mb-4 p-2 rounded-lg hover:bg-surface-200 {dark ? 'hover:bg-surface-700 text-surface-300' : 'text-surface-600'}" onclick={() => sidebarOpen = true} aria-label="Open menu">
|
||||
<button class="md:hidden mb-4 p-2 rounded-lg text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700" onclick={() => sidebarOpen = true} aria-label="Open menu">
|
||||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /></svg>
|
||||
</button>
|
||||
{#if page === "dashboard" && hasPageAccess("dashboard")}
|
||||
|
||||
Reference in New Issue
Block a user