fix: complete dark mode coverage for editor, settings, and graph

- Add dark mode syntax highlighting colors for code blocks (hljs tokens)
- Add dark mode callout block backgrounds (blue, green, yellow, red, purple)
- Add dark mode styles for settings file browser meta text and breadcrumbs
- Fix knowledge graph D3 inline colors to be theme-aware (link strokes,
  node borders, label text)

https://claude.ai/code/session_01QddASAFJgFoPPTDS88nkq2

Author: claude

packages/ui/src/components/editor/editor-styles.css

@@ -977,3 +977,26 @@
 .dark .cept-folder-view-count { color: #71717a; background: #333; }
 .dark .cept-editor .drag-handle::after { color: #4a4a4a; }
 .dark .cept-editor .drag-handle:hover::after { color: #71717a; }
+
+/* Dark mode syntax highlighting */
+.dark .cept-editor .tiptap pre code .hljs-comment,
+.dark .cept-editor .tiptap pre code .hljs-quote { color: #6b7280; }
+.dark .cept-editor .tiptap pre code .hljs-keyword,
+.dark .cept-editor .tiptap pre code .hljs-selector-tag { color: #c084fc; }
+.dark .cept-editor .tiptap pre code .hljs-string,
+.dark .cept-editor .tiptap pre code .hljs-addition { color: #86efac; }
+.dark .cept-editor .tiptap pre code .hljs-number,
+.dark .cept-editor .tiptap pre code .hljs-literal { color: #fb923c; }
+.dark .cept-editor .tiptap pre code .hljs-built_in,
+.dark .cept-editor .tiptap pre code .hljs-type { color: #fde047; }
+.dark .cept-editor .tiptap pre code .hljs-title,
+.dark .cept-editor .tiptap pre code .hljs-section { color: #93c5fd; }
+.dark .cept-editor .tiptap pre code .hljs-deletion { color: #fca5a5; }
+
+/* Dark mode callout blocks */
+.dark .cept-editor .tiptap div.cept-callout { background-color: rgba(255, 255, 255, 0.05); }
+.dark .cept-editor .tiptap div.cept-callout[data-color="blue"] { background-color: rgba(59, 130, 246, 0.15); }
+.dark .cept-editor .tiptap div.cept-callout[data-color="green"] { background-color: rgba(34, 197, 94, 0.15); }
+.dark .cept-editor .tiptap div.cept-callout[data-color="yellow"] { background-color: rgba(234, 179, 8, 0.15); }
+.dark .cept-editor .tiptap div.cept-callout[data-color="red"] { background-color: rgba(239, 68, 68, 0.15); }
+.dark .cept-editor .tiptap div.cept-callout[data-color="purple"] { background-color: rgba(168, 85, 247, 0.15); }

packages/ui/src/components/knowledge-graph/KnowledgeGraph.tsx

@@ -69,7 +69,10 @@ export function KnowledgeGraph({
       .data(displayData.links)
       .join('line')
       .attr('class', 'cept-graph-link')
-      .attr('stroke', (d: GraphLink) => d.type === 'parent' ? '#d1d5db' : '#93c5fd')
+      .attr('stroke', (d: GraphLink) => {
+        const isDark = document.documentElement.classList.contains('dark');
+        return d.type === 'parent' ? (isDark ? '#525252' : '#d1d5db') : (isDark ? '#60a5fa' : '#93c5fd');
+      })
       .attr('stroke-width', 1.5)
       .attr('stroke-dasharray', (d: GraphLink) => d.type === 'mention' ? '4,4' : 'none');
 
@@ -93,15 +96,15 @@ export function KnowledgeGraph({
         if (d.group && colorGroups[d.group]) return colorGroups[d.group];
         return colorGroups['default'] ?? '#6366f1';
       })
-      .attr('stroke', '#fff')
+      .attr('stroke', document.documentElement.classList.contains('dark') ? '#1e1e1e' : '#fff')
       .attr('stroke-width', 2);
 
     if (showLabels) {
       node.append('text')
         .attr('dx', 12)
         .attr('dy', 4)
         .attr('font-size', '11px')
-        .attr('fill', '#374151')
+        .attr('fill', document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#374151')
         .text((d: GraphNode) => d.title);
     }
 

packages/ui/src/components/settings/settings-styles.css

@@ -1252,6 +1252,9 @@
 .dark .cept-fb-preview-header { background: #262626; border-color: #333; }
 .dark .cept-fb-preview-name { color: #e5e5e5; }
 .dark .cept-fb-preview-content { color: #d4d4d8; }
+.dark .cept-fb-preview-meta { color: #71717a; }
+.dark .cept-fb-breadcrumb-link { color: #a1a1aa; }
+.dark .cept-fb-breadcrumb-link:hover { color: #d4d4d8; }
 
 /* Clone overlay */
 .cept-clone-overlay {