Further theme edits

brittle-ui/style.css

@@ -3,18 +3,18 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  --bg:           #1e1e2e;
+  --bg:           #1d2021;
-  --bg-surface:   #24243a;
+  --bg-surface:   #282828;
-  --bg-overlay:   #2e2e44;
+  --bg-overlay:   #3c3836;
-  --border:       #3a3a55;
+  --border:       #504945;
-  --accent:       #7c6af7;
+  --accent:       #d79921;
-  --accent-dim:   #5a4dcc;
+  --accent-dim:   #b57614;
-  --text:         #cdd6f4;
+  --text:         #ebdbb2;
-  --text-muted:   #7f849c;
+  --text-muted:   #a89984;
-  --text-subtle:  #585b70;
+  --text-subtle:  #928374;
-  --cursor-bg:    #3a3a70;
+  --cursor-bg:    #504945;
-  --cursor-fg:    #ffffff;
+  --cursor-fg:    #ebdbb2;
-  --focused-ring: #7c6af7;
+  --focused-ring: #d79921;
   --font-mono:    "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
   --font-ui:      system-ui, -apple-system, "Segoe UI", sans-serif;
   --radius:       4px;
@@ -22,6 +22,21 @@
   --cmd-h:        28px;
 }
 
+[data-theme="dark"] {
+  --bg:           #1d2021;
+  --bg-surface:   #282828;
+  --bg-overlay:   #3c3836;
+  --border:       #504945;
+  --accent:       #d79921;
+  --accent-dim:   #b57614;
+  --text:         #ebdbb2;
+  --text-muted:   #a89984;
+  --text-subtle:  #928374;
+  --cursor-bg:    #504945;
+  --cursor-fg:    #ebdbb2;
+  --focused-ring: #d79921;
+}
+
 html, body {
   height: 100%;
   background: var(--bg);
@@ -218,8 +233,8 @@ ul { list-style: none; }
   color: var(--cursor-fg);
 }
 
-.pub-item.pub-cursor .pub-meta { color: rgba(255,255,255,0.6); }
+.pub-item.pub-cursor .pub-meta { color: var(--text-muted); opacity: 0.8; }
-.pub-item.pub-cursor .pub-type { color: rgba(255,255,255,0.7); }
+.pub-item.pub-cursor .pub-type { color: var(--accent); }
 
 .pub-type {
   font-size: 10px;
@@ -335,7 +350,7 @@ ul { list-style: none; }
 }
 
 .command-status {
-  color: #f38ba8;
+  color: #fb4934;
   font-size: 12px;
 }
 
@@ -368,21 +383,21 @@ ul { list-style: none; }
   outline-offset: -1px;
 }
 
-/* ── Light theme (Catppuccin Latte) ──────────────────────────────────────── */
+/* ── Light theme (Gruvbox Light) ─────────────────────────────────────────── */
 
 [data-theme="light"] {
-  --bg:           #eff1f5;
+  --bg:           #f9f5d7;
-  --bg-surface:   #e6e9ef;
+  --bg-surface:   #fbf1c7;
-  --bg-overlay:   #dce0e8;
+  --bg-overlay:   #ebdbb2;
-  --border:       #ccd0da;
+  --border:       #d5c4a1;
-  --accent:       #7287fd;
+  --accent:       #af3a03;
-  --accent-dim:   #5c6bc0;
+  --accent-dim:   #d65d0e;
-  --text:         #4c4f69;
+  --text:         #3c3836;
-  --text-muted:   #8c8fa1;
+  --text-muted:   #7c6f64;
-  --text-subtle:  #acb0be;
+  --text-subtle:  #928374;
-  --cursor-bg:    #7287fd;
+  --cursor-bg:    #d5c4a1;
-  --cursor-fg:    #eff1f5;
+  --cursor-fg:    #3c3836;
-  --focused-ring: #7287fd;
+  --focused-ring: #af3a03;
 }
 
 /* ── Scrollbar (WebKit) ───────────────────────────────────────────────────── */

src-tauri/assets/viewer/index.html

@@ -10,9 +10,9 @@
     html, body {
       height: 100%;
       overflow: hidden;
-      background: #3a3a3a;
+      background: #1d2021;
       font-family: system-ui, -apple-system, sans-serif;
-      color: #ccc;
+      color: #ebdbb2;
     }
 
     body { display: flex; flex-direction: column; }
@@ -20,17 +20,17 @@
     #error-banner {
       display: none;
       flex-shrink: 0;
-      background: #5c1a1a;
+      background: #fb4934;
-      color: #f99;
+      color: #1d2021;
       padding: 10px 20px;
       font-size: 13px;
-      border-bottom: 1px solid #7a2222;
+      border-bottom: 1px solid #cc241d;
     }
 
     #toolbar {
       flex-shrink: 0;
-      background: #252525;
+      background: #282828;
-      border-bottom: 1px solid #444;
+      border-bottom: 1px solid #504945;
       padding: 5px 14px;
       display: flex;
       align-items: center;
@@ -41,9 +41,9 @@
     #zoom-controls { display: flex; align-items: center; gap: 6px; }
 
     button {
-      background: #3d3d3d;
+      background: #3c3836;
-      color: #ccc;
+      color: #ebdbb2;
-      border: 1px solid #555;
+      border: 1px solid #504945;
       border-radius: 4px;
       padding: 3px 10px;
       cursor: pointer;
@@ -51,23 +51,23 @@
       line-height: 1.4;
       min-width: 28px;
     }
-    button:hover { background: #4a4a4a; }
+    button:hover { background: #504945; }
 
     #zoom-label {
       min-width: 46px;
       text-align: center;
       font-size: 12px;
-      color: #bbb;
+      color: #a89984;
     }
 
     #page-indicator {
-      color: #888;
+      color: #a89984;
       font-size: 12px;
     }
 
     #status {
       margin-left: auto;
-      color: #888;
+      color: #928374;
       font-size: 12px;
     }
 
@@ -76,6 +76,7 @@
       flex: 1;
       overflow-y: auto;
       overflow-x: auto;
+      background: #1d2021;
     }
 
     /* Inner column that receives the CSS zoom for instant visual feedback.