add theme

src/components/graph/ConfigNode.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useSt
 import CodeMirror from '@uiw/react-codemirror'
 import { yaml } from '@codemirror/lang-yaml'
 import FlowContext from '../../lib/flowContext'
+import { useTheme } from '../../lib/themeContext'
 import {
     BaseNode,
     BaseNodeContent,
@@ -29,7 +30,7 @@ type Props = {
 
 export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
     const [value, setValue] = useState<string>(data?.yaml ?? '# Enter YAML here\n')
-
+    const { theme } = useTheme()
     const ctx = useContext(FlowContext)
     const setNodes = ctx?.setNodes
     const storedYaml = ctx?.nodes?.find((n: any) => n.id === id)?.data?.yaml ?? ''
@@ -199,6 +200,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
                         ref={editorRef}
                         value={value}
                         height="180px"
+                        theme={theme}
                         extensions={extensions}
                         onChange={onChange}
                         basicSetup={{ lineNumbers: true, foldGutter: false }}
@@ -208,7 +210,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
             </BaseNodeContent>
 
             <BaseNodeFooter>
-                <div className="w-full text-xs text-gray-500">{storedYaml ? `${storedYaml.length} chars` : 'none'}</div>
+                <div className="w-full text-xs text-muted-foreground">{storedYaml ? `${storedYaml.length} chars` : 'none'}</div>
             </BaseNodeFooter>
 
             <InputHandle id="ain" />

src/components/graph/FunctionNode.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useSt
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import FlowContext from '../../lib/flowContext'
+import { useTheme } from '../../lib/themeContext'
 import {
     BaseNode,
     BaseNodeContent,
@@ -23,6 +24,7 @@ return args[0];
 
 export const FunctionNode = memo(function FunctionNode({ id, data }: Props) {
     const [value, setValue] = useState<string>(data?.body ?? DEFAULT_BODY)
+    const { theme } = useTheme()
     const ctx = useContext(FlowContext)
     const setNodes = ctx?.setNodes
 
@@ -66,6 +68,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data }: Props) {
                     <CodeMirror
                         value={value}
                         height="120px"
+                        theme={theme}
                         extensions={extensions}
                         onChange={onChange}
                         basicSetup={{ lineNumbers: true, foldGutter: false }}

src/components/graph/NodeHandles.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Handle, Position } from 'reactflow'
+import { Handle, Position } from '@xyflow/react'
 import { Circle, CircleDashed } from 'lucide-react'
 
 type NodeHandleProps = {
@@ -26,7 +26,7 @@ export function InputHandle({ id }: NodeHandleProps) {
                 justifyContent: 'center',
             }}
         >
-            <CircleDashed className="w-4 h-4 text-gray-500 pointer-events-none" />
+            <CircleDashed className="w-4 h-4 text-muted-foreground pointer-events-none" />
         </Handle>
     )
 }
@@ -51,7 +51,7 @@ export function OutputHandle({ id }: NodeHandleProps) {
                 justifyContent: 'center',
             }}
         >
-            <Circle className="w-4 h-4 text-gray-800 pointer-events-none" />
+            <Circle className="w-4 h-4 text-foreground pointer-events-none" />
         </Handle>
     )
 }

src/components/graph/RenderingNode.tsx

@@ -230,7 +230,7 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
                         <div className="p-3 text-xs text-red-700">{error.message}</div>
                     )
                 ) : (
-                    <pre className="text-xs text-gray-800 max-h-48 overflow-auto">{output}</pre>
+                    <pre className="text-xs text-foreground max-h-48 overflow-auto">{output}</pre>
                 )}
             </BaseNodeContent>