Make the source editor follow the host's dark mode (assuming it uses …

…PatternFly)

packages/ui/src/components/SourceEditor.tsx

@@ -28,6 +28,7 @@ export function SourceEditor({
   onSave: (source: string, sourceType: SourceType) => void;
 }) {
   const [height, setHeight] = useState<number>(0);
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
   const [code, setCode] = useState<string | undefined>(source);
 
@@ -55,6 +56,31 @@ export function SourceEditor({
     setCode(source);
   }, [source]);
 
+  useEffect(() => {
+    const observer = new MutationObserver((mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "attributes") {
+          console.log(`The ${mutation.attributeName} attribute was modified.`);
+          if (mutation.attributeName === "class") {
+            setIsDarkMode(
+              (mutation.target as HTMLElement).classList.contains(
+                "pf-v6-theme-dark"
+              )
+            );
+          }
+        }
+      }
+    });
+    observer.observe(document.getElementsByTagName("html")[0], {
+      attributes: true,
+      subtree: false,
+      childList: false,
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   const onEditorDidMount: CodeEditorProps["onEditorDidMount"] = (e) => {
     editorRef.current = e;
   };
@@ -137,6 +163,7 @@ export function SourceEditor({
           height={`${height - 130}px`}
           onEditorDidMount={onEditorDidMount}
           emptyState={<SectionSkeleton count={5} />}
+          isDarkTheme={isDarkMode}
           code={code}
         />
       )}