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 16:45:02 +02:00
parent 6715079a89
commit f4cbd1f703
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -182,23 +182,17 @@ 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>,
)
// calculate color // Replace the color function with this
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 computedStyleMap["--secondary"] return style.getPropertyValue("--secondary")
} else if (visited.has(d.id) || d.id.startsWith("tags/")) { } else if (visited.has(d.id) || d.id.startsWith("tags/")) {
return computedStyleMap["--tertiary"] return style.getPropertyValue("--tertiary")
} else { } else {
return computedStyleMap["--gray"] return style.getPropertyValue("--gray")
} }
} }
@ -259,7 +253,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
alpha = l.active ? 1 : 0.2 alpha = l.active ? 1 : 0.2
} }
l.color = l.active ? computedStyleMap["--gray"] : computedStyleMap["--lightgray"] l.color = l.active ? getComputedStyle(document.documentElement).getPropertyValue("--gray") : getComputedStyle(document.documentElement).getPropertyValue("--lightgray")
tweenGroup.add(new Tweened<LinkRenderData>(l).to({ alpha }, 200)) tweenGroup.add(new Tweened<LinkRenderData>(l).to({ alpha }, 200))
} }
@ -379,8 +373,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: computedStyleMap["--dark"], fill: getComputedStyle(document.documentElement).getPropertyValue("--dark"),
fontFamily: computedStyleMap["--bodyFont"], fontFamily: getComputedStyle(document.documentElement).getPropertyValue("--bodyFont"),
}, },
resolution: window.devicePixelRatio * 4, resolution: window.devicePixelRatio * 4,
}) })
@ -396,7 +390,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 ? computedStyleMap["--light"] : color(n) }) .fill({ color: isTagNode ? getComputedStyle(document.documentElement).getPropertyValue("--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)
@ -435,7 +429,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
const linkRenderDatum: LinkRenderData = { const linkRenderDatum: LinkRenderData = {
simulationData: l, simulationData: l,
gfx, gfx,
color: computedStyleMap["--lightgray"], color: getComputedStyle(document.documentElement).getPropertyValue("--lightgray"),
alpha: 1, alpha: 1,
active: false, active: false,
} }
@ -550,6 +544,19 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
addToVisited(simplifySlug(slug)) addToVisited(simplifySlug(slug))
await renderGraph("graph-container", slug) await renderGraph("graph-container", slug)
// Add this function to re-render the graph when the theme changes
const handleThemeChange = () => {
renderGraph("graph-container", slug)
}
// Add event listener for theme change
document.addEventListener("themechange", handleThemeChange)
// Add cleanup for the event listener
window.addCleanup(() => {
document.removeEventListener("themechange", handleThemeChange)
})
const container = document.getElementById("global-graph-outer") const container = document.getElementById("global-graph-outer")
const sidebar = container?.closest(".sidebar") as HTMLElement const sidebar = container?.closest(".sidebar") as HTMLElement