Skip to content

Instantly share code, notes, and snippets.

@bartkl
Created January 21, 2024 19:11
Quartz Excalidraw render
diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts
index c42a367..06767b5 100644
--- a/quartz/components/scripts/darkmode.inline.ts
+++ b/quartz/components/scripts/darkmode.inline.ts
@@ -1,5 +1,6 @@
-const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"
-const currentTheme = localStorage.getItem("theme") ?? userPref
+import { getUserPreferredColorScheme, renderExcalidrawLinks } from "./util"
+
+const currentTheme = localStorage.getItem("theme") ?? getUserPreferredColorScheme()
document.documentElement.setAttribute("saved-theme", currentTheme)
document.addEventListener("nav", () => {
@@ -11,6 +12,7 @@ document.addEventListener("nav", () => {
document.documentElement.setAttribute("saved-theme", "light")
localStorage.setItem("theme", "light")
}
+ renderExcalidrawLinks(localStorage.getItem("theme"))
}
// Darkmode toggle
diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts
index 5fcabad..444e145 100644
--- a/quartz/components/scripts/util.ts
+++ b/quartz/components/scripts/util.ts
@@ -23,3 +23,31 @@ export function removeAllChildren(node: HTMLElement) {
node.removeChild(node.firstChild)
}
}
+
+export function renderExcalidrawLinks(theme: "dark" | "light") {
+ let currentTheme = theme == "dark" ? "light" : "dark"
+ Object.values(document.getElementsByTagName("img")).forEach(img => {
+ if (img.src.endsWith(`.excalidraw.${currentTheme}.svg`)) {
+ let srcParts = img.src.split(".")
+ srcParts.splice(-2, 1, theme)
+ img.src = srcParts.join(".")
+ }
+ })
+}
+
+export function getUserPreferredColorScheme() {
+ return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"
+}
+
+// Have SVG images in the article adhere to the correct color scheme.
+document.addEventListener("nav", (e) => {
+ let theme = localStorage.getItem("theme") ?? getUserPreferredColorScheme()
+ Object.values(document.getElementsByTagName("article")[0]
+ .getElementsByTagName("a")).forEach(a => {
+ if (a.href.endsWith(".excalidraw")) {
+ let img = document.createElement("img")
+ img.src = `${a.href}.${theme}.svg`
+ a.replaceWith(img)
+ }
+ })
+})
@bartkl
Copy link
Author

bartkl commented Feb 9, 2025

@Guillaume-Fernandez Nice find! That's really interesting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment