From 0546850df8264f65abb7f84786185c986dae214f Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Sun, 12 Apr 2026 18:18:31 +0700
Subject: [PATCH] fix(vault): softer graph colors for dark mode, thinner edge
 lines

---
 ui/web/src/adapters/vault-graph-adapter.ts    | 20 +++++++++----------
 .../graph/sigma-graph-container.tsx           |  6 +++---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/ui/web/src/adapters/vault-graph-adapter.ts b/ui/web/src/adapters/vault-graph-adapter.ts
index 5c033197..50504e31 100644
--- a/ui/web/src/adapters/vault-graph-adapter.ts
+++ b/ui/web/src/adapters/vault-graph-adapter.ts
@@ -2,18 +2,18 @@ import Graph from "graphology";
 import type { VaultDocument, VaultLink } from "@/types/vault";
 import { getNodeSize, truncateMiddle } from "@/components/graph/graph-utils";
 
-// Colors per vault document type — dominant types (note 44%, media 54%) use
-// softer tones; rare types use vivid accents for visibility.
+// Colors per vault document type — muted pastels that work well on both
+// light and dark backgrounds. Avoid harsh neons on dark mode.
 export const VAULT_TYPE_COLORS: Record<string, string> = {
-  context: "#6366f1",  // indigo (rare, vivid)
-  memory: "#8b5cf6",   // violet
-  note: "#14b8a6",     // teal (dominant, soft)
-  skill: "#22c55e",    // green
-  episodic: "#f59e0b", // amber
-  media: "#ec4899",    // pink (dominant, soft)
-  document: "#06b6d4", // cyan (Phase 01: PDF/office — distinct from media)
+  context: "#818cf8",  // indigo-400 (softer)
+  memory: "#a78bfa",   // violet-400
+  note: "#5eead4",     // teal-300 (soft, readable)
+  skill: "#86efac",    // green-300
+  episodic: "#fcd34d", // amber-300
+  media: "#f9a8d4",    // pink-300 (soft, not harsh)
+  document: "#67e8f9", // cyan-300
 };
-const DEFAULT_COLOR = "#9ca3af";
+const DEFAULT_COLOR = "#a1a1aa";
 
 /** Limit documents by degree centrality (highest-connected first). */
 export function limitVaultDocsByDegree(
diff --git a/ui/web/src/components/graph/sigma-graph-container.tsx b/ui/web/src/components/graph/sigma-graph-container.tsx
index e338c821..0dd9d660 100644
--- a/ui/web/src/components/graph/sigma-graph-container.tsx
+++ b/ui/web/src/components/graph/sigma-graph-container.tsx
@@ -34,10 +34,10 @@ function useThemeColors() {
   return {
     isDark,
     labelColor: isDark ? "#e2e8f0" : "#1e293b",
-    // Base edge color — visible but not dominant
-    edgeColor: isDark ? "#47556966" : "#94a3b8cc",
+    // Base edge color — subtle, not dominant
+    edgeColor: isDark ? "#47556944" : "#94a3b8aa",
     // Dim color for non-active edges
-    dimEdgeColor: isDark ? "#47556933" : "#cbd5e166",
+    dimEdgeColor: isDark ? "#47556922" : "#cbd5e155",
     // Highlight for active neighborhood edges
     highlightEdgeColor: isDark ? "#a1a1aa" : "#64748b",
   };