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" />