Implement theme-aware styling in NetworkMap component

karam-ajaj · karam-ajaj · commit b80f9bfb749d · 2026-02-19T01:46:09.000+01:00
diff --git a/data/html/build-info.json b/data/html/build-info.json
@@ -1 +1 @@
-{ "version": "dev3.3.4", "commit": "3f04ef3", "builtAt": "2026-02-13T00:42:46Z" }
+{ "version": "dev3.3.5", "commit": "7cf294d", "builtAt": "2026-02-19T00:44:58Z" }
diff --git a/data/react-ui/src/components/NetworkMap.jsx b/data/react-ui/src/components/NetworkMap.jsx
@@ -35,6 +35,16 @@ export function NetworkMap() {
   const [externalNode, setExternalNode] = useState(null);
   const [selectedSubnet, setSelectedSubnet] = useState(null);
   const [layoutStyle, setLayoutStyle] = useState("default");
+  const [isDark, setIsDark] = useState(() => document.documentElement.classList.contains("dark"));
+
+  // Observe <html> class changes so canvas re-renders when theme toggles
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
 
   /**
    * Initial data load (hosts + external)
@@ -80,6 +90,8 @@ export function NetworkMap() {
   useEffect(() => {
     if (!rawData.nonDockerHosts.length && !rawData.dockerHosts.length) return;
 
+    const labelColor = isDark ? "#fff" : "#000";
+
     const nodes = new DataSet();
     const edges = new DataSet();
     const infoMap = {};
@@ -99,7 +111,7 @@ export function NetworkMap() {
             label: networkName ? `${networkName}` : `${subnet}.x`,
             shape: "box",
             color: getHubColor(subnet),
-            font: { size: 14, color: "#000" },
+            font: { size: 14, color: labelColor },
             level: 1, // Below Internet
           });
         }
@@ -119,7 +131,7 @@ export function NetworkMap() {
             label: networkName,
             shape: "box",
             color: "#10b981",
-            font: { size: 12, color: "#000" },
+            font: { size: 12, color: labelColor },
             level: 3,
         });
       }
@@ -261,7 +273,7 @@ export function NetworkMap() {
           label: `Internet\n(${externalNode.ip})`,
           shape: "box",
           color: "#f43f5e",
-          font: { size: 12, color: "#000" },
+          font: { size: 12, color: labelColor },
           level: 0,
         });
       }
@@ -340,7 +352,7 @@ export function NetworkMap() {
           springConstant: 0.05,
         },
       },
-      nodes: { shape: "dot", size: 16, font: { size: 12 } },
+      nodes: { shape: "dot", size: 16, font: { size: 12, color: labelColor } },
       edges: {
         arrows: "to",
         smooth: true,
@@ -384,7 +396,7 @@ export function NetworkMap() {
       });
       networkRef.current = net;
     }
-  }, [rawData, filters, layoutStyle, externalNode]);
+  }, [rawData, filters, layoutStyle, externalNode, isDark]);
 
   return (
     <div className="relative w-full h-full bg-white dark:bg-gray-800 border dark:border-gray-700 rounded p-4 flex flex-col">

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{ "version": "dev3.3.4", "commit": "3f04ef3", "builtAt": "2026-02-13T00:42:46Z" }`
	`1`	`+{ "version": "dev3.3.5", "commit": "7cf294d", "builtAt": "2026-02-19T00:44:58Z" }`