add: support theme switch for giscus

Junyi-99 · Mar 18, 2024 · 74015da · Junyi-99 · May 1, 2024 · 74015da
1 parent 3cd15e9
commit 74015da
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git a/layouts/partials/giscus.html b/layouts/partials/giscus.html
@@ -4,6 +4,42 @@
 {{ $category := .Site.Params.GiscusDiscussionCategory | default "Announcements" }}
 {{ $lazyload := .Site.Params.GiscusLazyLoad | default false }}
 
+<script>
+        function detectCurrentScheme() {
+        if (localStorage !== null && localStorage.getItem('user-color-scheme')) {
+                return localStorage.getItem('user-color-scheme')
+        }
+        if (defaultTheme) {
+                return defaultTheme
+        }
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+
+        let giscusTheme = detectCurrentScheme();
+        let giscusAttributes = {
+                "src": "https://giscus.app/client.js",
+                "data-repo": "{{- .Site.Params.GiscusRepo -}}",
+                "data-repo-id": "{{- .Site.Params.GiscusRepoId -}}",
+                "data-category": "{{- $category -}}",
+                "data-category-id": "{{- .Site.Params.GiscusCategoryId -}}",
+                "data-mapping": "{{ $mapping }}",
+                "data-strict": "0",
+                "data-reactions-enabled": "1",
+                "data-emit-metadata": "0",
+                "data-input-position": "bottom",
+                "data-theme": giscusTheme,
+                "data-lang": "{{ $language }}",
+                "crossorigin": "anonymous",
+                "lazyload": "{{ $lazyload }}",
+                "async": true
+        }
+        let main = document.querySelector('main');
+        let giscusScript = document.createElement('script');
+        Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+        main.appendChild(giscusScript);
+
+</script>
+{{/*  
 <script src="https://giscus.app/client.js"
         data-repo="{{- .Site.Params.GiscusRepo -}}"
         data-repo-id="{{- .Site.Params.GiscusRepoId -}}"
@@ -21,4 +57,4 @@
         data-loading="lazy"
         {{ end }}
         async>
-</script>
+</script>  */}}
diff --git a/layouts/partials/theme-switcher.html b/layouts/partials/theme-switcher.html
@@ -18,7 +18,7 @@
 
     <script>
         const STORAGE_KEY = 'user-color-scheme'
-        const defaultTheme = {{ $colorTheme }}
+        const defaultTheme = "{{ $colorTheme }}"
 
         let currentTheme
         let switchButton
@@ -44,7 +44,7 @@
                 switchButton.addEventListener('click', switchTheme, false)
             }
 
-            showContent()
+            showContent();
         })
 
         function detectCurrentScheme() {
@@ -61,11 +61,28 @@
             currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
             if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
             document.documentElement.setAttribute('data-theme', currentTheme);
+            changeGiscusTheme();
         }
 
         function showContent() {
             document.body.style.visibility = 'visible';
             document.body.style.opacity = 1;
         }
+
+        function changeGiscusTheme () {
+            const theme = detectCurrentScheme();
+
+            function sendMessage(message) {
+              const iframe = document.querySelector('iframe.giscus-frame');
+              if (!iframe) return;
+              iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+            }
+
+            sendMessage({
+              setConfig: {
+                theme: theme
+              }
+            });
+        }
     </script>
 {{ end }}