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: Reload graph after a theme change

Browse Source
This commit is contained in:
Marc 2024-08-31 21:07:39 +02:00
parent d76a323f34
commit 58ffc0c326
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -182,17 +182,23 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
"--darkgray",
"--bodyFont",
] as const
const computedStyleMap = cssVars.reduce(
(acc, key) => {
acc[key] = getComputedStyle(document.documentElement).getPropertyValue(key)
return acc
},
{} as Record<(typeof cssVars)[number], string>,
)
// Dynamic color function
// calculate color
const color = (d: NodeData) => {
const style = getComputedStyle(document.documentElement)
const isCurrent = d.id === slug
if (isCurrent) {
return style.getPropertyValue("--secondary")
return computedStyleMap["--secondary"]
} else if (visited.has(d.id) || d.id.startsWith("tags/")) {
return style.getPropertyValue("--tertiary")
return computedStyleMap["--tertiary"]
} else {
return style.getPropertyValue("--gray")
return computedStyleMap["--gray"]
}
}
@ -253,7 +259,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
alpha = l.active ? 1 : 0.2
}
l.color = l.active ? getComputedStyle(document.documentElement).getPropertyValue("--gray") : getComputedStyle(document.documentElement).getPropertyValue("--lightgray")
l.color = l.active ? computedStyleMap["--gray"] : computedStyleMap["--lightgray"]
tweenGroup.add(new Tweened<LinkRenderData>(l).to({ alpha }, 200))
}
@ -373,8 +379,8 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
anchor: { x: 0.5, y: 1.2 },
style: {
fontSize: fontSize * 15,
fill: getComputedStyle(document.documentElement).getPropertyValue("--dark"),
fontFamily: getComputedStyle(document.documentElement).getPropertyValue("--bodyFont"),
fill: computedStyleMap["--dark"],
fontFamily: computedStyleMap["--bodyFont"],
},
resolution: window.devicePixelRatio * 4,
})
@ -390,7 +396,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
cursor: "pointer",
})
.circle(0, 0, nodeRadius(n))
.fill({ color: isTagNode ? getComputedStyle(document.documentElement).getPropertyValue("--light") : color(n) })
.fill({ color: isTagNode ? computedStyleMap["--light"] : color(n) })
.stroke({ width: isTagNode ? 2 : 0, color: color(n) })
.on("pointerover", (e) => {
updateHoverInfo(e.target.label)
@ -429,7 +435,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
const linkRenderDatum: LinkRenderData = {
simulationData: l,
gfx,
color: getComputedStyle(document.documentElement).getPropertyValue("--lightgray"),
color: computedStyleMap["--lightgray"],
alpha: 1,
active: false,
}
@ -592,4 +598,4 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
document.addEventListener("keydown", shortcutHandler)
window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
})
})