From ab25cc915e8b07d81c61e526d2f410c23463e50e Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Mon, 9 Mar 2026 18:39:39 +0100
Subject: [PATCH] chore: color improvements in light mode

---
 app/app.css                                   | 72 +++++++++----------
 app/client/components/app-sidebar.tsx         |  4 +-
 app/client/components/grid-background.tsx     |  2 +-
 app/client/components/layout.tsx              |  4 +-
 app/client/components/ui/card.tsx             |  2 +-
 .../backups/components/backup-card.tsx        |  6 +-
 app/client/modules/backups/routes/backups.tsx |  4 +-
 .../volumes/components/storage-chart.tsx      |  2 +-
 8 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/app/app.css b/app/app.css
index 15f07d91..19842c5a 100644
--- a/app/app.css
+++ b/app/app.css
@@ -89,40 +89,40 @@ body {
 
 :root {
 	--radius: 0.625rem;
-	--background: oklch(0.975 0.005 80);
-	--foreground: oklch(0.25 0.015 55);
-	--card: oklch(0.988 0.004 80);
-	--card-foreground: oklch(0.25 0.015 55);
-	--card-header: oklch(0.945 0.008 80);
-	--popover: oklch(0.988 0.004 80);
-	--popover-foreground: oklch(0.25 0.015 55);
-	--primary: oklch(0.25 0.015 55);
-	--primary-foreground: oklch(0.975 0.005 80);
-	--secondary: oklch(0.935 0.008 70);
-	--secondary-foreground: oklch(0.25 0.015 55);
-	--muted: oklch(0.935 0.008 70);
-	--muted-foreground: oklch(0.58 0.025 60);
-	--accent: oklch(0.935 0.008 70);
-	--accent-foreground: oklch(0.25 0.015 55);
+	--background: oklch(0.98 0.002 250);
+	--foreground: oklch(0.20 0.01 260);
+	--card: #ffffff;
+	--card-foreground: oklch(0.20 0.01 260);
+	--card-header: oklch(0.99 0.001 260);
+	--popover: #ffffff;
+	--popover-foreground: oklch(0.20 0.01 260);
+	--primary: oklch(0.20 0.01 260);
+	--primary-foreground: #ffffff;
+	--secondary: oklch(0.96 0.005 260);
+	--secondary-foreground: oklch(0.20 0.01 260);
+	--muted: oklch(0.95 0.005 260);
+	--muted-foreground: oklch(0.45 0.01 260);
+	--accent: oklch(0.96 0.005 260);
+	--accent-foreground: oklch(0.20 0.01 260);
 	--destructive: oklch(0.577 0.245 27.325);
 	--destructive-foreground: #fff;
 	--success: oklch(0.57 0.16 148);
-	--border: oklch(0.9 0.01 70);
-	--input: oklch(0.9 0.01 70);
-	--ring: oklch(0.7 0.015 60);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.96 0.007 75);
-	--sidebar-foreground: oklch(0.25 0.015 55);
-	--sidebar-primary: oklch(0.25 0.015 55);
-	--sidebar-primary-foreground: oklch(0.975 0.005 80);
-	--sidebar-accent: oklch(0.935 0.008 70);
-	--sidebar-accent-foreground: oklch(0.25 0.015 55);
-	--sidebar-border: oklch(0.9 0.01 70);
-	--sidebar-ring: oklch(0.7 0.015 60);
+	--border: oklch(0.90 0.01 260);
+	--input: oklch(0.90 0.01 260);
+	--ring: oklch(0.7 0.01 260);
+	--chart-1: oklch(0.55 0.22 260);
+	--chart-2: oklch(0.6 0.15 200);
+	--chart-3: oklch(0.45 0.12 280);
+	--chart-4: oklch(0.7 0.15 190);
+	--chart-5: oklch(0.55 0.18 300);
+	--sidebar: #ffffff;
+	--sidebar-foreground: oklch(0.35 0.01 260);
+	--sidebar-primary: oklch(0.20 0.01 260);
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: oklch(0.97 0.005 260);
+	--sidebar-accent-foreground: oklch(0.20 0.01 260);
+	--sidebar-border: oklch(0.90 0.01 260);
+	--sidebar-ring: oklch(0.7 0.01 260);
 	--strong-accent: #ff543a;
 }
 
@@ -179,11 +179,11 @@ body {
 
 @layer base {
 	:root {
-		--chart-1: oklch(0.646 0.222 41.116);
-		--chart-2: oklch(0.6 0.118 184.704);
-		--chart-3: oklch(0.398 0.07 227.392);
-		--chart-4: oklch(0.828 0.189 84.429);
-		--chart-5: oklch(0.769 0.188 70.08);
+		--chart-1: oklch(0.55 0.22 260);
+		--chart-2: oklch(0.6 0.15 200);
+		--chart-3: oklch(0.45 0.12 280);
+		--chart-4: oklch(0.7 0.15 190);
+		--chart-5: oklch(0.55 0.18 300);
 	}
 
 	.dark {
diff --git a/app/client/components/app-sidebar.tsx b/app/client/components/app-sidebar.tsx
index e59b397c..c27734d7 100644
--- a/app/client/components/app-sidebar.tsx
+++ b/app/client/components/app-sidebar.tsx
@@ -69,7 +69,7 @@ export function AppSidebar({ isInstanceAdmin }: Props) {
 
 	return (
 		<Sidebar variant="inset" collapsible="icon" className="p-0">
-			<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-16.25 flex-row items-center p-4">
+			<SidebarHeader className="bg-card-header border-b border-border/80 dark:border-border/50 hidden md:flex h-16.25 flex-row items-center p-4">
 				<Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2">
 					<img src="/images/zerobyte.png" alt="Zerobyte Logo" className={cn("h-8 w-8 shrink-0 object-contain -ml-2")} />
 					<span
@@ -194,7 +194,7 @@ export function AppSidebar({ isInstanceAdmin }: Props) {
 					</>
 				)}
 			</SidebarContent>
-			<SidebarFooter className="p-4 border-r border-border/50">
+			<SidebarFooter className="p-4 border-r border-border/80 dark:border-border/50">
 				<OrganizationSwitcher />
 				<div className="flex items-center justify-between gap-2">
 					<HoverCard openDelay={200}>
diff --git a/app/client/components/grid-background.tsx b/app/client/components/grid-background.tsx
index 0eadcb29..9dbcd5d2 100644
--- a/app/client/components/grid-background.tsx
+++ b/app/client/components/grid-background.tsx
@@ -14,7 +14,7 @@ export function GridBackground({ children, className, containerClassName }: Grid
 				className={cn(
 					"pointer-events-none absolute inset-0 w-full h-full",
 					"bg-[size:40px_40px]",
-					"bg-[linear-gradient(to_right,#EAE5DF_1px,transparent_1px),linear-gradient(to_bottom,#EAE5DF_1px,transparent_1px)]",
+					"bg-[linear-gradient(to_right,rgba(0,0,0,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.04)_1px,transparent_1px)]",
 					"dark:bg-[linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
 					"[mask-image:radial-gradient(ellipse_at_top,black_70%,transparent_100%)]",
 				)}
diff --git a/app/client/components/layout.tsx b/app/client/components/layout.tsx
index 8b16ff22..9bb084e2 100644
--- a/app/client/components/layout.tsx
+++ b/app/client/components/layout.tsx
@@ -36,14 +36,14 @@ export function Layout({ loaderData }: Props) {
 		<SidebarProvider defaultOpen={loaderData.sidebarOpen}>
 			<AppSidebar isInstanceAdmin={loaderData.user?.role === "admin"} />
 			<div className="w-full relative flex flex-col min-h-screen md:h-screen md:overflow-hidden">
-				<header className="z-50 bg-card-header border-b border-border/50 shrink-0 h-16.25">
+				<header className="z-50 bg-card-header border-b border-border/80 dark:border-border/50 shrink-0 h-16.25">
 					<div className="flex items-center h-full justify-between px-2 sm:px-8 mx-auto container gap-4">
 						<div className="flex items-center gap-4 min-w-0">
 							<SidebarTrigger />
 							<AppBreadcrumb />
 						</div>
 						{loaderData.user && (
-							<div className="flex items-center bg-muted/30 border border-border/50 px-2 py-1 rounded-full shadow-sm">
+							<div className="flex items-center bg-card dark:bg-muted/30 border border-border/80 dark:border-border/50 px-2 py-1 rounded-full shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] dark:shadow-sm">
 								<span className="text-sm text-muted-foreground hidden md:inline-flex pl-2 mr-5">
 									<span className="text-foreground">{loaderData.user.name}</span>
 								</span>
diff --git a/app/client/components/ui/card.tsx b/app/client/components/ui/card.tsx
index ed6393a7..c31a6971 100644
--- a/app/client/components/ui/card.tsx
+++ b/app/client/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, children, interactive, ...props }: React.ComponentPro
 		<div
 			data-slot="card"
 			className={cn(
-				"bg-card text-card-foreground group relative flex flex-col gap-6 border border-border py-6 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.03)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] transition-colors duration-300 ",
+				"bg-card text-card-foreground group relative flex flex-col gap-6 border border-border py-6 shadow-[0_8px_30px_-15px_rgba(0,0,0,0.04)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] transition-colors duration-300 ",
 				className,
 			)}
 			{...props}
diff --git a/app/client/modules/backups/components/backup-card.tsx b/app/client/modules/backups/components/backup-card.tsx
index 16f529c8..af583ea3 100644
--- a/app/client/modules/backups/components/backup-card.tsx
+++ b/app/client/modules/backups/components/backup-card.tsx
@@ -33,19 +33,19 @@ export const BackupCard = ({ schedule }: { schedule: BackupSchedule }) => {
 					<div className="space-y-3">
 						<div className="flex items-center text-sm gap-2">
 							<span className="text-muted-foreground shrink-0">Schedule</span>
-							<div className="flex-1 border-b border-dashed border-border/50" />
+							<div className="flex-1 border-b border-dashed border-border/80 dark:border-border/50" />
 							<code className="text-xs text-foreground font-mono bg-muted px-2 py-1 rounded shrink-0">
 								{schedule.cronExpression}
 							</code>
 						</div>
 						<div className="flex items-center text-sm gap-2">
 							<span className="text-muted-foreground shrink-0">Last backup</span>
-							<div className="flex-1 border-b border-dashed border-border/50" />
+							<div className="flex-1 border-b border-dashed border-border/80 dark:border-border/50" />
 							<span className="text-foreground font-mono text-sm shrink-0">{formatTimeAgo(schedule.lastBackupAt)}</span>
 						</div>
 						<div className="flex items-center text-sm gap-2">
 							<span className="text-muted-foreground shrink-0">Next backup</span>
-							<div className="flex-1 border-b border-dashed border-border/50" />
+							<div className="flex-1 border-b border-dashed border-border/80 dark:border-border/50" />
 							<span className="text-foreground font-mono text-sm shrink-0">
 								{formatShortDateTime(schedule.nextBackupAt)}
 							</span>
diff --git a/app/client/modules/backups/routes/backups.tsx b/app/client/modules/backups/routes/backups.tsx
index b9e5525c..36a6e724 100644
--- a/app/client/modules/backups/routes/backups.tsx
+++ b/app/client/modules/backups/routes/backups.tsx
@@ -110,9 +110,9 @@ export function BackupsPage() {
 							);
 						})}
 						<Link to="/backups/create" className="h-full">
-							<div className="group flex flex-col items-center justify-center h-full min-h-50 border border-dashed border-border/80 bg-card hover:bg-card/50 transition-colors cursor-pointer rounded-s shadow-sm hover:border-border">
+							<div className="group flex flex-col items-center justify-center h-full min-h-50 border-2 border-dashed border-border/60 bg-muted/20 dark:bg-card hover:bg-muted/40 dark:hover:bg-card/50 transition-all cursor-pointer rounded-xl hover:shadow-[0_8px_30px_-15px_rgba(0,0,0,0.05)] dark:hover:shadow-sm hover:border-border hover:-translate-y-[1px] active:scale-[0.98] duration-300">
 								<div className="flex flex-col items-center justify-center gap-3">
-									<div className="p-3 rounded-full bg-muted/20 group-hover:bg-muted/50 transition-all group-hover:scale-110 duration-300">
+									<div className="p-3 rounded-full bg-background/50 dark:bg-muted/20 group-hover:bg-background dark:group-hover:bg-muted/50 transition-all group-hover:scale-110 duration-300 shadow-xs dark:shadow-none">
 										<Plus className="h-6 w-6 text-muted-foreground group-hover:text-foreground transition-colors" />
 									</div>
 									<span className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
diff --git a/app/client/modules/volumes/components/storage-chart.tsx b/app/client/modules/volumes/components/storage-chart.tsx
index 28b3b56c..416e3fe7 100644
--- a/app/client/modules/volumes/components/storage-chart.tsx
+++ b/app/client/modules/volumes/components/storage-chart.tsx
@@ -18,7 +18,7 @@ export function StorageChart({ statfs }: Props) {
 			{
 				name: "Used",
 				value: statfs.used,
-				fill: "#ff543a",
+				fill: "var(--strong-accent)",
 			},
 			{
 				name: "Free",