diff --git a/overrides/main.html b/overrides/main.html
index 6079cc21..eba3bf6a 100644
--- a/overrides/main.html
+++ b/overrides/main.html
@@ -1,17 +1,35 @@
-{% extends "base.html" %} {% block disqus %}
-<script src="https://giscus.app/client.js"
-        data-repo="PKUFlyingPig/cs-self-learning"
+{% extends "base.html" %}
+
+{% block disqus %}
+<script src="https://giscus.app/client.js" 
+        data-repo="PKUFlyingPig/cs-self-learning" 
         data-repo-id="R_kgDOGP67ng"
-        data-category="Announcements"
-        data-category-id="DIC_kwDOGP67ns4COM9Q"
+        data-category="Announcements" 
+        data-category-id="DIC_kwDOGP67ns4COM9Q" 
         data-mapping="title"
-        data-reactions-enabled="1"
-        data-emit-metadata="0"
-        data-input-position="top"
-        data-theme="light"
+        data-reactions-enabled="1" 
+        data-emit-metadata="0" 
+        data-input-position="top" 
+        data-theme="light" 
         data-lang="zh-CN"
-        data-loading="lazy"
-        crossorigin="anonymous"
+        data-loading="lazy" 
+        crossorigin="anonymous" 
         async>
 </script>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const ref = document.querySelector("[data-md-component=palette]")
+        ref.addEventListener("change", function () {
+            var palette = __get("__palette")
+            if (palette && typeof palette.color === "object") {
+                const theme = palette.color.scheme === "slate" ? "dark" : "light"
+                const frame = document.querySelector(".giscus-frame")
+                frame.contentWindow.postMessage({
+                    giscus: { setConfig: { theme } }
+                }, "https://giscus.app")
+            }
+        })
+    })
+</script>
 {% endblock %}