this resolves the crash but not the weird flicker

static/js/markdown.js

@@ -13,16 +13,47 @@ const colorToGrayscale = (color) => {
 };
 
 /**
- * Extract color using canvas2d
+ * Extract colors from an image or SVG element using canvas
- * @param {HTMLImageElement} image Image source
+ * @param {HTMLImageElement | SVGSVGElement} element Image or SVG source element
- * @returns Colors represeting the image
+ * @returns {Promise<Array>} Colors representing the element
  */
-const extractColors = (image) => {
+const extractColors = (element) => {
+  return new Promise((resolve, reject) => {
+    // Create a canvas with the same dimensions as the element
     const canvas = document.createElement("canvas");
-  canvas.width = image.naturalWidth || image.width;
+    let imageSource;
-  canvas.height = image.naturalHeight || image.height;
+
+    if (element instanceof SVGSVGElement) {
+      // SVG element handling
+      canvas.width = element.viewBox.baseVal.width;
+      canvas.height = element.viewBox.baseVal.height;
+
+      const svgString = new XMLSerializer().serializeToString(element);
+      const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
+      const svgUrl = URL.createObjectURL(svgBlob);
+
+      imageSource = new Image();
+      imageSource.src = svgUrl;
+
+      imageSource.onload = () => {
+        processImage(imageSource);
+        URL.revokeObjectURL(svgUrl);
+      };
+
+      imageSource.onerror = (error) => {
+        URL.revokeObjectURL(svgUrl);
+        reject(error);
+      };
+    } else {
+      // Regular image handling
+      canvas.width = element.naturalWidth || element.width;
+      canvas.height = element.naturalHeight || element.height;
+      processImage(element);
+    }
+
+    const processImage = (img) => {
       const ctx = canvas.getContext("2d");
-  ctx.drawImage(image, 0, 0);
+      ctx.drawImage(img, 0, 0);
 
       const imageData = ctx.getImageData(
         0,
@@ -43,7 +74,9 @@ const extractColors = (image) => {
         }
       }
 
-  return colors;
+      resolve(colors);
+    };
+  });
 };
 
 /**
@@ -51,28 +84,31 @@ const extractColors = (image) => {
  * @param {Mode} mode
  */
 const changeTheme = (mode) => {
-  for (const item of document.getElementsByTagName("svg")) {
+  // Process SVG elements
-    const image = document.createElement("img");
+  for (const svgElement of document.getElementsByTagName("svg")) {
-    image.src = `data:image/svg+xml;base64,${btoa(
+    extractColors(svgElement)
-      new XMLSerializer().serializeToString(item)
+      .then((colors) => {
-    )}`;
+        applyFilter(mode, svgElement, colors);
-
+      })
-    image.width = item.viewBox.baseVal.width;
+      .catch((error) => {
-    image.height = item.viewBox.baseVal.height;
+        console.error("Error extracting colors:", error);
-
+      });
-    image.onload = () => {
-      applyFilter(mode, item, extractColors(image));
-    };
   }
 
-  // SVG embedded in images as base64
+  // Process SVG images embedded as base64
   for (const item of document.getElementsByTagName("img")) {
     if (!item.src.startsWith("data:image/svg+xml;base64,")) {
-      // Exclude image who aren't SVG and base64 encoded
+      // Exclude images that aren't SVG and base64 encoded
       continue;
     }
 
-    applyFilter(mode, item, extractColors(item));
+    extractColors(item)
+      .then((colors) => {
+        applyFilter(mode, item, colors);
+      })
+      .catch((error) => {
+        console.error("Error extracting colors:", error);
+      });
   }
 };