add theme

src/App.tsx

@@ -1,24 +1,23 @@
 import React from 'react'
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   Background,
   MiniMap,
   addEdge,
-  applyEdgeChanges,
-  applyNodeChanges,
   useNodesState,
   useEdgesState,
-  Node,
-  Edge,
-  Connection,
-  NodeChange,
-  EdgeChange,
-} from 'reactflow'
+  type Node,
+  type Edge,
+  type Connection,
+  type ColorMode,
+} from '@xyflow/react'
 import ConfigNode from './components/graph/ConfigNode'
 import FunctionNode from './components/graph/FunctionNode'
 import RenderingNode from './components/graph/RenderingNode'
 import VariableNode from './components/graph/VariableNode'
 import FlowContext from './lib/flowContext'
+import { useTheme } from './lib/themeContext'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -27,6 +26,8 @@ import {
   ContextMenuLabel,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu"
+import { Button } from '@/components/ui/button'
+import { Moon, Sun } from 'lucide-react'
 // Generate short unique node ids when missing
 const genId = () => `node_${Math.random().toString(36).slice(2, 9)}`
 
@@ -48,6 +49,7 @@ const initialNodes: Node[] = [
 const initialEdges: Edge[] = [{ id: 'e-config-render', source: 'config-1', target: 'render-1' }]
 
 export default function App() {
+  const { theme, toggleTheme } = useTheme()
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
   const [rfInstance, setRfInstance] = React.useState<any | null>(null)
@@ -140,6 +142,16 @@ export default function App() {
 
   return (
     <div className="reactflow-wrapper" ref={wrapperRef} onContextMenu={onCanvasContextMenu} style={{ position: 'relative' }}>
+      <Button
+        variant="outline"
+        size="icon"
+        className="absolute top-3 right-3 z-10 nodrag nopan"
+        onClick={toggleTheme}
+        title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+        aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+      >
+        {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      </Button>
       <FlowContext.Provider value={{ nodes, setNodes, edges, setEdges }}>
         <ContextMenu>
           <ContextMenuTrigger asChild>
@@ -151,6 +163,7 @@ export default function App() {
                 onEdgesChange={onEdgesChange}
                 onConnect={onConnect}
                 nodeTypes={nodeTypes}
+                colorMode={theme as ColorMode}
                 fitView
                 onInit={onInit}
               >