1 files changed, 51 insertions, 0 deletions
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 0000000..371365e
--- /dev/null
+++ b/assets/js/theme.js
@@ -0,0 +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';
+    }
+  }
+  setTheme(theme);
+}
+
+
+initTheme(localStorage.getItem("theme"));