From 71a73f35b13401afb47197cff7962bc8ff1af6fb Mon Sep 17 00:00:00 2001
From: Marc <anonrock1@gmail.com>
Date: Sat, 31 Aug 2024 16:01:47 +0200
Subject: [PATCH] fix: adapt node text color by colorScheme

---
 quartz/components/scripts/graph.inline.ts | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 200c1331e..a542c720e 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -192,16 +192,13 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
 
   function updateTextStyle() {
     const darkMode = document.documentElement.getAttribute("saved-theme") === "dark"
-    const textColor = darkMode ? computedStyleMap["--dark"] : computedStyleMap["--light"]
     
     for (const n of nodeRenderData) {
-      n.label.style.fill = textColor
+      const nodeColor = color(n.simulationData)
+      n.label.style.fill = darkMode ? "white" : "black"
     }
   }
 
-  document.addEventListener("themechange", updateTextStyle)
-  window.addCleanup(() => document.removeEventListener("themechange", updateTextStyle))
-
   // calculate color
   const color = (d: NodeData) => {
     const isCurrent = d.id === slug
@@ -391,7 +388,6 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
       anchor: { x: 0.5, y: 1.2 },
       style: {
         fontSize: fontSize * 15,
-        fill: computedStyleMap["--dark"],
         fontFamily: computedStyleMap["--bodyFont"],
       },
       resolution: window.devicePixelRatio * 4,
@@ -438,9 +434,14 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     }
 
     nodeRenderData.push(nodeRenderDatum)
-    updateTextStyle()
   }
 
+  // Call updateTextStyle immediately after creating all labels
+  updateTextStyle()
+
+  document.addEventListener("themechange", updateTextStyle)
+  window.addCleanup(() => document.removeEventListener("themechange", updateTextStyle))
+
   for (const l of graphData.links) {
     const gfx = new Graphics({ interactive: false, eventMode: "none" })
     linkContainer.addChild(gfx)
@@ -555,7 +556,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
   }
 
   const graphAnimationFrameHandle = requestAnimationFrame(animate)
-  window.addCleanup(() => document.removeEventListener("themechange", updateTextStyle))
+  window.addCleanup(() => cancelAnimationFrame(graphAnimationFrameHandle))
 }
 
 document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
@@ -598,4 +599,4 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
   document.addEventListener("keydown", shortcutHandler)
   window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
-})
\ No newline at end of file
+})