From 86ad554095f2c672f0d202fb6cb173b0f329cfae Mon Sep 17 00:00:00 2001
From: mancuoj <45707684+mancuoj@users.noreply.github.com>
Date: Wed, 21 Dec 2022 20:26:13 +0800
Subject: [PATCH] [FEATURE] Dynamic theme change for giscus (#362)

* feat(giscus): dynamic theme change

* reformat and update giscus theme color to protanopia
---
 overrides/main.html | 38 +++++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/overrides/main.html b/overrides/main.html
index 6079cc21..e7c8cffe 100644
--- a/overrides/main.html
+++ b/overrides/main.html
@@ -1,17 +1,25 @@
-{% 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-mapping="title"
-        data-reactions-enabled="1"
-        data-emit-metadata="0"
-        data-input-position="top"
-        data-theme="light"
-        data-lang="zh-CN"
-        data-loading="lazy"
-        crossorigin="anonymous"
-        async>
+{% 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-mapping="title"
+    data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="zh-CN"
+    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_protanopia" : "light_protanopia"
+                const frame = document.querySelector(".giscus-frame")
+                frame.contentWindow.postMessage({
+                    giscus: { setConfig: { theme } }
+                }, "https://giscus.app")
+            }
+        })
+    })
 </script>
 {% endblock %}