[FEATURE] Dynamic theme change for giscus (#362)

* feat(giscus): dynamic theme change

* reformat and update giscus theme color to protanopia

overrides/main.html

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