Correctly update medium-zoom background when switching theme (alshedivat#332)

Author: alshedivat

_posts/2015-05-15-images.md

@@ -43,4 +43,3 @@ The rest of the images in this post are all zoomable, arranged into different mi
         <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg" data-zoomable>
     </div>
 </div>
-

assets/js/dark_mode.js

@@ -2,33 +2,6 @@ $(document).ready(function() {
     const mode_toggle = document.getElementById("light-toggle");
 
     mode_toggle.addEventListener("click", function() {
-        const temp = localStorage.getItem("theme");
-        toggleTheme(temp);
+        toggleTheme(localStorage.getItem("theme"));
     });
-
-    let toggleTheme = (theme) => {
-        if (theme == "dark") {
-            setTheme("light");
-        } else {
-            setTheme("dark");
-        }
-    }
-
-    let setTheme = (theme) =>  {
-        trans();
-        if (theme) {
-            document.documentElement.setAttribute("data-theme", theme)
-        }
-        else {
-            document.documentElement.removeAttribute("data-theme");
-        }
-        localStorage.setItem("theme", theme);
-    };
-
-    let trans = () => {
-        document.documentElement.classList.add("transition");
-        window.setTimeout(() => {
-            document.documentElement.classList.remove("transition")
-        }, 500)
-    }
 });

assets/js/theme.js

@@ -1,17 +1,51 @@
 // Has to be in the head tag, otherwise a flicker effect will occur.
+
+let toggleTheme = (theme) => {
+  if (theme == "dark") {
+    setTheme("light");
+  } else {
+    setTheme("dark");
+  }
+}
+
+
+let setTheme = (theme) =>  {
+  transTheme();
+  if (theme) {
+    document.documentElement.setAttribute("data-theme", theme);
+  }
+  else {
+    document.documentElement.removeAttribute("data-theme");
+  }
+  localStorage.setItem("theme", theme);
+  
+  // Updates the background of medium-zoom overlay.
+  if (typeof medium_zoom !== 'undefined') {
+    medium_zoom.update({
+      background: getComputedStyle(document.documentElement)
+          .getPropertyValue('--global-bg-color') + 'ee',  // + 'ee' for trasparency.
+    })
+  }
+};
+
+
+let transTheme = () => {
+  document.documentElement.classList.add("transition");
+  window.setTimeout(() => {
+    document.documentElement.classList.remove("transition");
+  }, 500)
+}
+
+
 let initTheme = (theme) => {
   if (theme == null) {
     const userPref = window.matchMedia;
     if (userPref && userPref('(prefers-color-scheme: dark)').matches) {
         theme = 'dark';
     }
   }
-
-  if (theme)  {
-    document.documentElement.setAttribute('data-theme', theme)
-  }
-
-  localStorage.setItem("theme", theme);
+  setTheme(theme);
 }
 
+
 initTheme(localStorage.getItem("theme"));

assets/js/zoom.js

@@ -1,8 +1,8 @@
-
+// Initialize medium zoom.
 $(document).ready(function() {
-    mediumZoom('[data-zoomable]', {
-        margin: 100,
-        background: getComputedStyle(document.documentElement)
-            .getPropertyValue('--global-bg-color') + 'ee',
-    })
+  medium_zoom = mediumZoom('[data-zoomable]', {
+    margin: 100,
+    background: getComputedStyle(document.documentElement)
+        .getPropertyValue('--global-bg-color') + 'ee',  // + 'ee' for trasparency.
+  })
 });