Quartz Excalidraw render

darkmode.inline.ts.diff

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

util.ts.diff

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)
+    }
+  })
+})

@Guillaume-Fernandez that's an interesting alternative way of doing it. I'm not mainly a front-end developer, so I wouldn't have thought of a CSS solution like that :).

However, I don't think if I prefer your solution:

1. You are moving rendering logic to the client (the color inversion) and I'm not sure if this could become noticable on slower clients for example for bigger images. (This might be nitpicky, just thinking out loud.)
2. I'm not sure if simply inverting the colors is the best way to get a dark mode flavour of the images. I honestly doubt that's all the Excalidraw dark mode rendering does. Anyway, I rather rely on them for implementing that logic.

@bartkl
You made me curious!
I just checked, this is how excalidraw dark mode works.

I will test my approach for few days. I think it's simpler and does not need two excalidraw exports (light and dark).
I'm using quartz with VSCode Foam, this is why I can't easily export both images from Obsidian.

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