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 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", "--darkgray",
"--bodyFont", "--bodyFont",
] as const ] 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 color = (d: NodeData) => {
const style = getComputedStyle(document.documentElement)
const isCurrent = d.id === slug const isCurrent = d.id === slug
if (isCurrent) { if (isCurrent) {
return style.getPropertyValue("--secondary") return computedStyleMap["--secondary"]
} else if (visited.has(d.id) || d.id.startsWith("tags/")) { } else if (visited.has(d.id) || d.id.startsWith("tags/")) {
return style.getPropertyValue("--tertiary") return computedStyleMap["--tertiary"]
} else { } 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 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)) 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 }, anchor: { x: 0.5, y: 1.2 },
style: { style: {
fontSize: fontSize * 15, fontSize: fontSize * 15,
fill: getComputedStyle(document.documentElement).getPropertyValue("--dark"), fill: computedStyleMap["--dark"],
fontFamily: getComputedStyle(document.documentElement).getPropertyValue("--bodyFont"), fontFamily: computedStyleMap["--bodyFont"],
}, },
resolution: window.devicePixelRatio * 4, resolution: window.devicePixelRatio * 4,
}) })
@ -390,7 +396,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
cursor: "pointer", cursor: "pointer",
}) })
.circle(0, 0, nodeRadius(n)) .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) }) .stroke({ width: isTagNode ? 2 : 0, color: color(n) })
.on("pointerover", (e) => { .on("pointerover", (e) => {
updateHoverInfo(e.target.label) updateHoverInfo(e.target.label)
@ -429,7 +435,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
const linkRenderDatum: LinkRenderData = { const linkRenderDatum: LinkRenderData = {
simulationData: l, simulationData: l,
gfx, gfx,
color: getComputedStyle(document.documentElement).getPropertyValue("--lightgray"), color: computedStyleMap["--lightgray"],
alpha: 1, alpha: 1,
active: false, active: false,
} }
@ -592,4 +598,4 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
document.addEventListener("keydown", shortcutHandler) document.addEventListener("keydown", shortcutHandler)
window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler)) window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
}) })