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

_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.
+ })
 });