diff --git a/static/js/cours.js b/static/js/cours.js index 596181e..74459a2 100644 --- a/static/js/cours.js +++ b/static/js/cours.js @@ -80,6 +80,61 @@ const deepestNodeOpened = (path, options) => { } }; +const svgDarkTheme = () => { + 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 + break; + } + + /** Convert to grayscale */ + const colorToGrayscale = (color) => { + return 0.3 * color.r + 0.59 * color.g + 0.11 * color.b; + }; + + /** Extract color using canvas2d */ + const extractColors = (image) => { + const canvas = document.createElement("canvas"); + canvas.width = image.width; + canvas.height = image.height; + const ctx = canvas.getContext("2d"); + ctx.drawImage(image, 0, 0); + const imageData = ctx.getImageData( + 0, + 0, + Math.max(1, canvas.width), + Math.max(1, canvas.height) + ); + const pixelData = imageData.data; + + const colors = []; + for (let i = 0; i < pixelData.length; i += 4) { + if (pixelData[i + 3] > 0) { + colors.push({ + r: pixelData[i], + g: pixelData[i + 1], + b: pixelData[i + 2], + }); + } + } + + return colors; + }; + + // Extract colors + const colors = extractColors(item); + + // Calculate the average grayscale value + const grayscaleValues = colors.map(colorToGrayscale); + const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0); + const averageGrayscale = totalGrayscale / grayscaleValues.length; + + if (averageGrayscale < 128) { + item.style = "filter: invert(1);"; + } + } +}; + window.addEventListener("load", () => { // Build the filetree const fileTreeElement = document.getElementsByTagName("aside")[0]; @@ -101,4 +156,7 @@ window.addEventListener("load", () => { ); uncollapse(last_openeded); + + // Fix SVG images + svgDarkTheme(); });