GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 15:05:42 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: adapt node text color by colorScheme

Browse Source
This commit is contained in:
Marc 2024-08-31 16:01:47 +02:00
parent 5dcacb315d
commit 71a73f35b1
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
quartz/components/scripts/graph.inline.ts
View File

@ -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))
})
})