fix(dashboard): resolve light theme visual issues from code review

- Use CSS variables for diff edge colors in GraphView
- Make ReactFlow colorMode respond to theme preset
- Replace hardcoded text-white/bg-gray-900 in LearnPanel
- Use CSS variables for .kbd border and box-shadow

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx

@@ -16,6 +16,7 @@ import "@xyflow/react/dist/style.css";
 import CustomNode from "./CustomNode";
 import type { CustomFlowNode } from "./CustomNode";
 import { useDashboardStore } from "../store";
+import { useTheme } from "../themes/index.ts";
 import { applyDagreLayout, applyDagreLayoutAsync, NODE_WIDTH, NODE_HEIGHT } from "../utils/layout";
 
 const LAYER_PADDING = 40;
@@ -153,8 +154,8 @@ function buildTopologyData(
       style: isImpacted
         ? {
             stroke: sourceInDiff && targetInDiff
-              ? "rgba(224, 82, 82, 0.7)"
-              : "rgba(212, 160, 48, 0.5)",
+              ? "var(--color-diff-changed)"
+              : "var(--color-diff-affected)",
             strokeWidth: 2.5,
           }
         : diffMode
@@ -309,6 +310,7 @@ function GraphViewInner() {
   const diffMode = useDashboardStore((s) => s.diffMode);
   const changedNodeIds = useDashboardStore((s) => s.changedNodeIds);
   const affectedNodeIds = useDashboardStore((s) => s.affectedNodeIds);
+  const { preset } = useTheme();
 
   const [layouting, setLayouting] = useState(false);
 
@@ -453,7 +455,7 @@ function GraphViewInner() {
         fitViewOptions={{ minZoom: 0.01, padding: 0.1 }}
         minZoom={0.01}
         maxZoom={2}
-        colorMode="dark"
+        colorMode={preset.isDark ? "dark" : "light"}
       >
         <Background variant={BackgroundVariant.Dots} color="var(--color-edge-dot)" gap={20} size={1} />
         <Controls />

understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx

@@ -122,16 +122,16 @@ export default function LearnPanel() {
                 <p className="mb-1.5 last:mb-0">{children}</p>
               ),
               strong: ({ children }) => (
-                <strong className="font-semibold text-white">{children}</strong>
+                <strong className="font-semibold text-text-primary">{children}</strong>
               ),
               code: ({ className, children }) => {
                 const isBlock = className?.includes("language-");
                 return isBlock ? (
-                  <code className="block bg-gray-900 rounded px-2 py-1.5 mb-1.5 overflow-x-auto text-[11px] leading-relaxed">
+                  <code className="block bg-elevated rounded px-2 py-1.5 mb-1.5 overflow-x-auto text-[11px] leading-relaxed">
                     {children}
                   </code>
                 ) : (
-                  <code className="bg-gray-900 rounded px-1 py-0.5 text-[11px]">
+                  <code className="bg-elevated rounded px-1 py-0.5 text-[11px]">
                     {children}
                   </code>
                 );

understand-anything-plugin/packages/dashboard/src/index.css

@@ -122,9 +122,9 @@ body {
   font-weight: 600;
   color: var(--color-accent);
   background: var(--kbd-bg);
-  border: 1px solid rgba(212, 165, 116, 0.3);
+  border: 1px solid var(--color-border-medium);
   border-radius: 0.25rem;
-  box-shadow: 0 1px 0 rgba(212, 165, 116, 0.2);
+  box-shadow: 0 1px 0 var(--scrollbar-thumb);
 }
 
 /* Animation keyframes */