diff --git a/static/js/cours.js b/static/js/cours.js index e4ebff3..32c5984 100644 --- a/static/js/cours.js +++ b/static/js/cours.js @@ -80,11 +80,16 @@ const deepestNodeOpened = (path, options) => { } }; -const svgDarkTheme = () => { +const Mode = { + Light: 1, + Dark: 2, +}; + +const svgChangeTheme = (mode) => { 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; + continue; } /** Convert to grayscale */ @@ -129,9 +134,19 @@ const svgDarkTheme = () => { const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0); const averageGrayscale = totalGrayscale / grayscaleValues.length; - if (averageGrayscale < 128) { + const treshold = 128; + + if (averageGrayscale < treshold && mode === Mode.Dark) { item.style = "filter: invert(1);"; + continue; } + + if (averageGrayscale > treshold && mode === Mode.Light) { + item.style = "filter: invert(1);"; + continue; + } + + item.style = ""; } }; @@ -160,13 +175,16 @@ window.addEventListener("load", () => { uncollapse(last_openeded); } - // Fix SVG images in dark mode - if (window.matchMedia("(prefers-color-scheme: dark)").matches) { - svgDarkTheme(); - } + // Fix SVG images + svgChangeTheme( + window.matchMedia("(prefers-color-scheme: dark)").matches + ? Mode.Dark + : Mode.Light + ); }); -// Is this working? window .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", svgDarkTheme); + .addEventListener("change", (event) => + svgChangeTheme(event.matches ? Mode.Dark : Mode.Light) + );