Merge. Bug fixes for <code> and ThemeSwitch for Giscus

Feature main

assets/css/dark.css

@@ -17,7 +17,7 @@
         --nav-link-color: #b6b6b6;
 
         --pre-color: #f8f8f2;
-        --pre-bg-color: rgba(175, 184, 193, 0.1);
+        --pre-bg-color: #292b2d;
         --pre-border-color: rgba(175, 184, 193, 0.3);
 
         --bq-color: #ccc;
@@ -55,7 +55,7 @@ html[data-theme='dark'] {
     --nav-link-color: #b6b6b6;
 
     --pre-color: #f8f8f2;
-    --pre-bg-color: rgba(175, 184, 193, 0.1);
+    --pre-bg-color: #292b2d;
     --pre-border-color: rgba(175, 184, 193, 0.3);
 
     --bq-color: #ccc;

assets/css/light.css

@@ -16,8 +16,8 @@ html[data-theme='light'] {
     --nav-link-color: #696969;
 
     --pre-color: rgb(31, 35, 40);
-    --pre-bg-color: rgba(175, 184, 193, 0.2);
+    --pre-bg-color: #eff1f2;
-    --pre-border-color: rgba(175, 184, 193, 0.3);
+    --pre-border-color: #e1e5e9;
 
     --bq-color: #ccc;
     --hr-color: #ccc;

assets/css/main.css

@@ -188,6 +188,7 @@ kbd {
 pre code, pre kbd {
     color: inherit;
     background-color: inherit;
+    border: none;
 }
 
 /* Styles */

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>  */}}

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 }}

layouts/partials/toc.html

@@ -17,7 +17,9 @@
 
 
 <script>
-  document.querySelector(".toc").addEventListener("click", function () {
+  var toc = document.querySelector(".toc");
+  if (toc) {
+    toc.addEventListener("click", function () {
       if (event.target.tagName !== "A") {
         event.preventDefault();
         if (this.open) {
@@ -29,4 +31,5 @@
         }
       }
     });
+  }
 </script>