Added color switching, moved scripts into dedicated files

2026-08-13 14:59:41 +02:00
parent 1bd70cb16b
commit 828c7dc3b6
6 changed files with 371 additions and 94 deletions
@@ -0,0 +1,94 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const injectedSvgs = [];
+
+  function parseColorMap(cssText, prop) {
+    const map = {};
+    const regex = new RegExp('\\[' + prop + '="([^"]+)"\\]\\s*{\\s*' + prop + ':\\s*([^;]+);', 'g');
+    let m;
+    while ((m = regex.exec(cssText)) !== null) {
+      map[m[1]] = m[2].trim();
+    }
+    return map;
+  }
+
+  function applyThemeToSvg(entry, isDark) {
+    const { svgEl, fillMap, strokeMap } = entry;
+
+    Object.keys(fillMap).forEach(function (lightColor) {
+      svgEl.querySelectorAll('[fill="' + lightColor + '"]').forEach(function (el) {
+        el.setAttribute('fill', isDark ? fillMap[lightColor] : lightColor);
+      });
+    });
+
+    Object.keys(strokeMap).forEach(function (lightColor) {
+      svgEl.querySelectorAll('[stroke="' + lightColor + '"]').forEach(function (el) {
+        el.setAttribute('stroke', isDark ? strokeMap[lightColor] : lightColor);
+      });
+    });
+  }
+
+  function getIsDark() {
+    const attr = document.documentElement.getAttribute('data-theme');
+    if (attr) return attr === 'dark';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  function applyThemeToAll() {
+    const isDark = getIsDark();
+    injectedSvgs.forEach(function (entry) {
+      applyThemeToSvg(entry, isDark);
+    });
+  }
+
+  const svgImages = document.querySelectorAll('.entry-content img[src$=".svg"]');
+
+  svgImages.forEach(function (img, index) {
+    const figureNumber = index + 1;
+    const originalSrc = img.src;
+    const originalAlt = img.alt;
+    const captionEl = img.nextElementSibling;
+    const captionText = (captionEl && captionEl.tagName === 'EM') ? captionEl.textContent : '';
+
+    fetch(img.src)
+      .then(function (response) { return response.text(); })
+      .then(function (svgText) {
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
+        const svgEl = svgDoc.querySelector('svg');
+
+        if (!svgEl) return;
+
+        if (img.alt) {
+          svgEl.setAttribute('role', 'img');
+          svgEl.setAttribute('aria-label', img.alt);
+        }
+
+        svgEl.classList.add('injected-svg');
+
+        // Dark-Farbzuordnung aus dem internen <style>-Block auslesen, dann Block entfernen
+        const styleEl = svgEl.querySelector('style');
+        let fillMap = {};
+        let strokeMap = {};
+        if (styleEl) {
+          fillMap = parseColorMap(styleEl.textContent, 'fill');
+          strokeMap = parseColorMap(styleEl.textContent, 'stroke');
+          styleEl.remove();
+        }
+
+        img.replaceWith(svgEl);
+
+        const entry = { svgEl: svgEl, fillMap: fillMap, strokeMap: strokeMap };
+        injectedSvgs.push(entry);
+        applyThemeToSvg(entry, getIsDark());
+
+        document.dispatchEvent(new CustomEvent('svg-injected', {
+          detail: { svgEl: svgEl, originalSrc: originalSrc, originalAlt: originalAlt, figureNumber: figureNumber, captionText: captionText }
+        }));
+      })
+      .catch(function (err) {
+        console.error('SVG injection failed for', img.src, err);
+      });
+  });
+
+  document.addEventListener('themechange', applyThemeToAll);
+});