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: graph adapts smoothly with dark/light mode

Browse Source
This commit is contained in:
Marc 2024-08-31 15:24:16 +02:00
parent 6715079a89
commit 5dcacb315d
3 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
content/.gitkeep
View File

6
content/index.md Normal file
View File

@ -0,0 +1,6 @@
---
title: Welcome to Quartz
---
This is a blank Quartz installation.
See the [documentation](https://quartz.jzhao.xyz) for how to get started.

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

@ -190,6 +190,18 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
{} as Record<(typeof cssVars)[number], string>, {} as Record<(typeof cssVars)[number], string>,
) )
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
}
}
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
@ -426,6 +438,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
} }
nodeRenderData.push(nodeRenderDatum) nodeRenderData.push(nodeRenderDatum)
updateTextStyle()
} }
for (const l of graphData.links) { for (const l of graphData.links) {
@ -542,7 +555,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
} }
const graphAnimationFrameHandle = requestAnimationFrame(animate) const graphAnimationFrameHandle = requestAnimationFrame(animate)
window.addCleanup(() => cancelAnimationFrame(graphAnimationFrameHandle)) window.addCleanup(() => document.removeEventListener("themechange", updateTextStyle))
} }
document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
@ -585,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))
}) })