Fix disqus background in dark mode. (#732)

### Prerequisites

- [x] This pull request fixes a bug.
- [x] This pull request adds a feature.
- [ ] This pull request introduces breaking change.

### Description

This PR fixes the bug about disqus iframe background in dark mode, it
also fix another bug when switching color mode.

Before:
<img width="881" alt="opaque background in dark mode"
src="https://user-images.githubusercontent.com/17041194/202862887-720dbb82-f0c8-4a24-97fd-78baef2a7cb4.png">

After:
<img width="883" alt="CleanShot 2022-11-20 at 01 12 52@2x"
src="https://user-images.githubusercontent.com/17041194/202863146-d5a246a7-bbe5-4bef-9687-883ce33f5b1a.png">

#### Why this happens

The problem is widely discussed
[here](w3c/csswg-drafts#4772).

>If the color scheme of an iframe differs from embedding document,
iframe gets an opaque canvas bg appropriate to its color scheme.

So I made two fixes:

1. Add `color-scheme: light` CSS property for disqus `iframe`, this
creates a transparent background and fixes the opaque issue.
2. Add `themeChanged` event to notice disqus comments board refresh when
the theme change, this fixes the opaque problem when you switch the
mode.

#### Reference

I've been working on this issue for a whole night and the fixing idea
was strongly inspired by [Sergeyski's
Blog](https://sergeyski.com/css-color-scheme-and-iframes-lessons-learned-from-disqus-background-bug/).

### Issues Resolved

Fixes #722.

CONTRIBUTORS.md

@@ -118,3 +118,4 @@
 - [Daniel Nduati](https://github.com/DanNduati)
 - [Simon Hollingshead](https://github.com/simonhollingshead)
 - [yangyangdaji](https://github.com/yangyangdaji)
+- [xiaotianxt](https://github.com/xiaotianxt)

assets/js/coder.js

@@ -76,6 +76,9 @@ function setTheme(theme) {
 
  }
 
+ // Create and send event
+ const event = new Event('themeChanged');
+ document.dispatchEvent(event);
 }
 
 function rememberTheme(theme) {

assets/scss/_base.scss

@@ -23,6 +23,10 @@ body {
  }
 }
 
+iframe[src*=disqus] {
+ color-scheme: light;
+}
+
 a {
  font-weight: 500;
  color: $link-color;

exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content

@@ -3050,6 +3050,9 @@ body {
  body {
  font-size: 1.6em;
  line-height: 1.6em; } }
+iframe[src*=disqus] {
+ color-scheme: light; }
+
 a {
  font-weight: 500;
  color: #1565c0;

layouts/partials/posts/disqus.html

@@ -1,3 +1,26 @@
 {{- if and (not (eq (.Site.DisqusShortname | default "") "")) (eq (.Params.disableComments | default false) false) -}}
- {{ template "_internal/disqus.html" . }}
+<div id="disqus_thread"></div>
+<script>
+ window.disqus_config = function () {
+ {{with .Params.disqus_identifier }}this.page.identifier = '{{ . }}';{{end}}
+ {{with .Params.disqus_title }}this.page.title = '{{ . }}';{{end}}
+ {{with .Params.disqus_url }}this.page.url = '{{ . | html }}';{{end}}
+ };
+ (function() {
+ if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
+ document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
+ return;
+ }
+ var d = document, s = d.createElement('script'); s.async = true;
+ s.src = '//' + {{ .Site.DisqusShortname }} + '.disqus.com/embed.js';
+ s.setAttribute('data-timestamp', +new Date());
+ (d.head || d.body).appendChild(s);
+ })();
+ // Disqus theme switching
+ document.addEventListener('themeChanged', function (e) { 
+ if (document.readyState == 'complete') {
+ DISQUS.reset({ reload: true, config: disqus_config });
+ }
+ });
+</script>
 {{- end -}}

resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json

@@ -1 +1 @@
-{"Target":"css/coder.min.c4d7e93a158eda5a65b3df343745d2092a0a1e2170feeec909b8a89443903c6a.css","MediaType":"text/css","Data":{"Integrity":"sha256-xNfpOhWO2lpls980N0XSCSoKHiFw/u7JCbiolEOQPGo="}}
+{"Target":"css/coder.min.7f9d180e3b3bebba9ba80d55eed1255c35e00764872854736d6ad7db38884ffc.css","MediaType":"text/css","Data":{"Integrity":"sha256-f50YDjs767qbqA1V7tElXDXgB2SHKFRzbWrX2ziIT/w="}}

resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content

@@ -3050,6 +3050,9 @@ body {
  body {
  font-size: 1.6em;
  line-height: 1.6em; } }
+iframe[src*=disqus] {
+ color-scheme: light; }
+
 a {
  font-weight: 500;
  color: #1565c0;