diff --git a/v4/layouts/partials/header.html b/v4/layouts/partials/header.html
index 800322b99..b1acef0f7 100644
--- a/v4/layouts/partials/header.html
+++ b/v4/layouts/partials/header.html
@@ -3,6 +3,35 @@
 {{ else }}
     <header>
 {{ end }}
+    <script>
+    const lightDarkToggle = document.getElementById("light-dark-toggle");
+    const lightThemeCss = document.getElementById("light-theme-css");
+    const darkThemeCss = document.getElementById("dark-theme-css");
+    const darkStore = localStorage.getItem("dark-store");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+    if (darkStore === "dark") {
+        setThemeMode("dark");
+    } else if (darkStore === "light") {
+        setThemeMode("light");
+    } else if (prefersDark.matches) {
+        setThemeMode("dark");
+    }
+
+    function setThemeMode(mode) {
+        if (mode === "dark") {
+            lightThemeCss.disabled = true;
+            darkThemeCss.disabled = false;
+            lightDarkToggle.className = "fa fa-moon";
+            localStorage.setItem("dark-store", mode);
+        } else {
+            lightThemeCss.disabled = false;
+            darkThemeCss.disabled = true;
+            lightDarkToggle.className = "fa fa-sun";
+            localStorage.setItem("dark-store", mode);
+        }
+    }
+    </script>
     <a id="back-to-top-button">
         <i class="fas fa-angle-up"></i>
     </a>