Fix link's color in side note with dark theme

1 files changed, 50 insertions, 9 deletions

diff --git a/src/js/theme.js b/src/js/theme.js
index a49fc8c..23d3a67 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -12,10 +12,11 @@ window.addEventListener("DOMContentLoaded", () => {
   const sidenotes = document.querySelector(".sidenotes");
   const footnotes = document.querySelector(".footnotes");
   const harr = document.querySelector("#harr");
-  const links = document.querySelectorAll("a");
+  let links = document.querySelectorAll("a");
   const likes = document.querySelectorAll(".likes");
   const tables = document.querySelectorAll("table");
   const codes = document.querySelectorAll("p code");
+  const imgs = document.querySelectorAll("img");
 
   if (storageTheme === "dark" || storageTheme === "light") {
     const theme = storageTheme;
@@ -30,16 +31,16 @@ window.addEventListener("DOMContentLoaded", () => {
       footnotes.classList.add(theme);
     }
 
-    for (let link of links) {
+    for (const link of links) {
       link.classList.add(theme);
     }
-    for (let likeBox of likes) {
+    for (const likeBox of likes) {
       likeBox.classList.add(theme);
     }
-    for (let table of tables) {
+    for (const table of tables) {
       table.classList.add(theme);
     }
-    for (let code of codes) {
+    for (const code of codes) {
       code.classList.add(theme);
     }
 
@@ -50,12 +51,34 @@ window.addEventListener("DOMContentLoaded", () => {
     for (const article of document.querySelectorAll("article")) {
       article.classList.add(theme);
     }
+
+    for (const img of imgs) {
+      // Check for a -alt src or -light -dark
+      const imgSrc = img.getAttribute("src");
+      console.log(imgSrc);
+      if (imgSrc === null) {
+        continue;
+      }
+      if (imgSrc.endsWith("-alt.svg")) {
+        img.setAttribute(
+          "src",
+          imgSrc.replace("-alt.svg", "-" + theme + ".svg"),
+        );
+      } else if (imgSrc.includes("-dark.svg") && isDark) {
+        img.setAttribute("src", imgSrc.replace("-dark.svg", "-light.svg"));
+      } else if (imgSrc.includes("-light.svg") && !isDark) {
+        img.setAttribute("src", imgSrc.replace("-light.svg", "-dark.svg"));
+      }
+    }
   }
 
   function toogleTheme() {
     const arg = isDark ? ["dark", "light"] : ["light", "dark"];
     const theme = arg[1];
 
+    // Must be updated because of the sidenotes
+    links = document.querySelectorAll("a");
+
     if (!hid.classList.replace(...arg)) {
       hid.classList.add(theme);
     }
@@ -79,26 +102,44 @@ window.addEventListener("DOMContentLoaded", () => {
       harr.classList.add(theme);
     }
 
-    for (let link of links) {
+    for (const link of links) {
       if (!link.classList.replace(...arg)) {
         link.classList.add(theme);
       }
     }
-    for (let table of tables) {
+    for (const table of tables) {
       if (!table.classList.replace(...arg)) {
         table.classList.add(theme);
       }
     }
-    for (let code of codes) {
+    for (const code of codes) {
       if (!code.classList.replace(...arg)) {
         code.classList.add(theme);
       }
     }
-    for (let like of likes) {
+    for (const like of likes) {
       if (!like.classList.replace(...arg)) {
         like.classList.add(theme);
       }
     }
+    for (const img of imgs) {
+      // Check for a -alt src or -light -dark
+      const imgSrc = img.getAttribute("src");
+      console.log(imgSrc);
+      if (imgSrc === null) {
+        continue;
+      }
+      if (imgSrc.endsWith("-alt.svg")) {
+        img.setAttribute(
+          "src",
+          imgSrc.replace("-alt.svg", "-" + theme + ".svg"),
+        );
+      } else if (imgSrc.includes("-dark.svg") && isDark) {
+        img.setAttribute("src", imgSrc.replace("-dark.svg", "-light.svg"));
+      } else if (imgSrc.includes("-light.svg") && !isDark) {
+        img.setAttribute("src", imgSrc.replace("-light.svg", "-dark.svg"));
+      }
+    }
 
     for (const article of document.querySelectorAll("article")) {
       if (!article.classList.replace(...arg)) {