Merge pull request #413 from shaform/disqus

Fix Disqus in dark mode
xianmin · Jan 10, 2025 · 5df20c0 · 5df20c0
2 parents 0fd4d7a + 33a9da6
commit 5df20c0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/assets/sass/_partial/_post.scss b/assets/sass/_partial/_post.scss
@@ -51,4 +51,10 @@
   justify-content: center;
 }
 
+ // This is to match the color scheme of Disqus so that its background could be transparent
+ // See: https://fvsch.com/transparent-iframes
+.comment [id*="disqus"] iframe {
+  color-scheme: light;
+}
+
 @import '_toc';
diff --git a/layouts/partials/comments/disqus.html b/layouts/partials/comments/disqus.html
@@ -20,6 +20,21 @@
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
 
       document.getElementById('load_disqus_container').style.display = 'none';
+
+      // disqus needs to be reloaded when the theme is changed
+      const themeToggles = document.querySelectorAll('.theme-toggle');
+      themeToggles.forEach(toggle => {
+        toggle.addEventListener('click', function (e) {
+          e.preventDefault();
+          DISQUS.reset({
+            reload: true,
+            config: function () {
+              this.page.identifier = '{{ .Site.Config.Services.Disqus.Shortname }}';
+              this.page.url = {{ .Permalink }};
+            }
+          });
+        });
+      });
     };
   </script>
   <noscript>Please enable JavaScript to view the