Created
January 21, 2024 19:11
Quartz Excalidraw render
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
+ } | |
+ }) | |
+}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@Guillaume-Fernandez Nice find! That's really interesting.