From d349fe4409cd1912c447f43572ab2e102f4964c0 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 2 May 2026 09:11:46 +0800
Subject: [PATCH] chore(theme): rebalance dark palette for readability

---
 web/src/themes/default-dark.css | 64 ++++++++++++++++-----------------
 web/src/utils/theme.ts          |  2 +-
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/web/src/themes/default-dark.css b/web/src/themes/default-dark.css
index fda9fe53..fa700550 100644
--- a/web/src/themes/default-dark.css
+++ b/web/src/themes/default-dark.css
@@ -1,43 +1,43 @@
 :root {
-  /* Surfaces — layered from darkest to lightest, consistent cool-slate tint */
-  --background: oklch(0.09 0.006 265);
-  --foreground: oklch(0.82 0.005 265);
+  /* Surfaces - soft graphite layers for comfortable long-form reading */
+  --background: oklch(0.24 0.008 255);
+  --foreground: oklch(0.9 0.006 255);
 
-  --card: oklch(0.13 0.006 265);
-  --card-foreground: oklch(0.82 0.005 265);
+  --card: oklch(0.275 0.009 255);
+  --card-foreground: oklch(0.9 0.006 255);
 
-  /* Popovers float above cards — slightly lighter to appear elevated */
-  --popover: oklch(0.17 0.006 265);
-  --popover-foreground: oklch(0.82 0.005 265);
+  /* Popovers float above cards without becoming high-glare panels */
+  --popover: oklch(0.32 0.01 255);
+  --popover-foreground: oklch(0.92 0.006 255);
 
-  /* Primary — subdued blue that sits back on dark surfaces */
-  --primary: oklch(0.42 0.08 250);
-  --primary-foreground: oklch(0.98 0.003 265);
+  /* Primary - readable blue for selected items, links, and focused controls */
+  --primary: oklch(0.62 0.11 250);
+  --primary-foreground: oklch(0.98 0.004 255);
 
-  /* Secondary — subtle elevated surface for secondary buttons */
-  --secondary: oklch(0.19 0.007 265);
-  --secondary-foreground: oklch(0.82 0.005 265);
+  /* Secondary - elevated surface for secondary buttons */
+  --secondary: oklch(0.33 0.011 255);
+  --secondary-foreground: oklch(0.88 0.006 255);
 
-  /* Muted — inline backgrounds (code, skeletons, error panels) */
-  --muted: oklch(0.21 0.008 265);
-  --muted-foreground: oklch(0.76 0.005 265);
+  /* Muted - inline backgrounds for code, skeletons, metadata, and panels */
+  --muted: oklch(0.35 0.011 255);
+  --muted-foreground: oklch(0.72 0.007 255);
 
-  /* Accent — hover states, slightly more chromatic than muted to feel interactive */
-  --accent: oklch(0.22 0.012 265);
-  --accent-foreground: oklch(0.88 0.005 265);
+  /* Accent - hover states with a little more color than muted surfaces */
+  --accent: oklch(0.39 0.018 250);
+  --accent-foreground: oklch(0.94 0.006 255);
 
-  /* Destructive — vivid red, clearly visible on dark surfaces */
-  --destructive: oklch(0.62 0.2 22);
-  --destructive-foreground: oklch(0.98 0.003 265);
+  /* Destructive - visible on dark surfaces without overpowering the palette */
+  --destructive: oklch(0.64 0.18 24);
+  --destructive-foreground: oklch(0.98 0.004 255);
 
-  /* Borders — --border for layout dividers, --input for form field borders */
-  --border: oklch(0.21 0.007 265);
-  --input: oklch(0.25 0.007 265);
-  --ring: oklch(0.34 0.06 250);
+  /* Borders - --border for layout dividers, --input for form field borders */
+  --border: oklch(0.38 0.01 255);
+  --input: oklch(0.42 0.011 255);
+  --ring: oklch(0.58 0.095 250);
 
-  /* Sidebar — darkest surface, distinct from background */
-  --sidebar: oklch(0.07 0.005 265);
-  --sidebar-foreground: oklch(0.68 0.005 265);
-  --sidebar-accent: oklch(0.19 0.01 265);
-  --sidebar-accent-foreground: oklch(0.84 0.005 265);
+  /* Sidebar - anchored but no longer near-black */
+  --sidebar: oklch(0.21 0.009 255);
+  --sidebar-foreground: oklch(0.76 0.007 255);
+  --sidebar-accent: oklch(0.31 0.015 250);
+  --sidebar-accent-foreground: oklch(0.9 0.006 255);
 }
diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts
index a2004d2f..caed6dcf 100644
--- a/web/src/utils/theme.ts
+++ b/web/src/utils/theme.ts
@@ -26,7 +26,7 @@ const THEME_CONTENT: Record<ResolvedTheme, string | null> = {
 
 const THEME_COLORS: Record<ResolvedTheme, string> = {
   default: "#faf9f5",
-  "default-dark": "#020204",
+  "default-dark": "#1d1f23",
   paper: "#f5ede4",
 };