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: 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() { function updateTextStyle() {
const darkMode = document.documentElement.getAttribute("saved-theme") === "dark" const darkMode = document.documentElement.getAttribute("saved-theme") === "dark"
const textColor = darkMode ? computedStyleMap["--dark"] : computedStyleMap["--light"]
for (const n of nodeRenderData) { 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 // calculate color
const color = (d: NodeData) => { const color = (d: NodeData) => {
const isCurrent = d.id === slug const isCurrent = d.id === slug
@ -391,7 +388,6 @@ 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"],
fontFamily: computedStyleMap["--bodyFont"], fontFamily: computedStyleMap["--bodyFont"],
}, },
resolution: window.devicePixelRatio * 4, resolution: window.devicePixelRatio * 4,
@ -438,9 +434,14 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
} }
nodeRenderData.push(nodeRenderDatum) 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) { for (const l of graphData.links) {
const gfx = new Graphics({ interactive: false, eventMode: "none" }) const gfx = new Graphics({ interactive: false, eventMode: "none" })
linkContainer.addChild(gfx) linkContainer.addChild(gfx)
@ -555,7 +556,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
} }
const graphAnimationFrameHandle = requestAnimationFrame(animate) const graphAnimationFrameHandle = requestAnimationFrame(animate)
window.addCleanup(() => document.removeEventListener("themechange", updateTextStyle)) window.addCleanup(() => cancelAnimationFrame(graphAnimationFrameHandle))
} }
document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
@ -598,4 +599,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))
}) })