在 disqus 中切换暗/亮模式答案

【问题标题】：Toggling dark/light mode in disqus在 disqus 中切换暗/亮模式
【发布时间】：2021-03-05 17:14:12
【问题描述】：

我有一个发布文章的网站。它由 Jekyll 组成，并由 GitHub 部署。该网站有一个按钮，可以将亮模式切换到暗模式，反之亦然，无需任何页面刷新。

今天我已经为它安装了 disqus 代码。它带有深色或浅色模式。所以我只是将它添加到我的切换器功能中：

const disqusThread = $('#disqus_thread')
const ps = $('#disqus_thread *')

tdm.onclick = function() {
    disqusThread.css('background-color', '#111')
    ps.attr('style', 'color: #fff !important')
.
.
.

这确实改变了背景，但我无法改变文本颜色。如果我尝试filter: invert(100%) 一切都很好，但图像看起来也倒置了。使用 #disqus_thread *:not(img) 也不起作用。

如果我打开 Firefox 的检查器工具，我会看到属性中有 !important。所以我不能再改变风格了。即使在基本的 CSS 中，来回切换实际上也不起作用。

有什么方法可以不使用滤镜来翻转颜色？

【问题讨论】：

标签： css disqus

【解决方案1】：

我也遇到了这个问题，我的解决方法是首先，切换按钮将使用代码删除 disqus_thread div 内的所有元素：

mydiv = document.getElementById('disqus_thread');
while (mydiv.firstChild) {
mydiv.removeChild(mydiv.firstChild);
}

然后，该按钮将使用以下功能重新加载 Disqus 评论部分：

var disqus_shortname = "sample-shortname";
var disqus_url = "sample-url";
var disqus_identifier = "sample-identifier";
var disqus_loaded = false;
            

function disqus() {          
     if (!disqus_loaded)  {
          disqus_loaded = true;
          var e = document.createElement("script");
          e.type = "text/javascript";
          e.async = true;
          e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
          (document.getElementsByTagName("head")[0] 
          ||document.getElementsByTagName("body")[0]).appendChild(e);
     }
}

最后，由于 Disqus 评论部分是自动的，它会检查继承的颜色并决定它是浅色模式还是深色模式，我从 https://help.disqus.com/en/articles/1717201-disqus-appearance-customizations 读取。

How is the color scheme determined?

 - The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;
 - The dark scheme is loaded in all other instances.

由于通过切换按钮，网站无论如何都会将正文的颜色变为较暗的颜色，Disqus 会自动继承这一点，只需单击切换按钮即可重新加载到其暗模式。

我不知道这是否会导致滞后，因为我在 localhost 上进行试验，到目前为止它对我来说并没有滞后。

参考资料：

https://css-tricks.com/snippets/javascript/remove-element/

https://help.disqus.com/en/articles/1717201-disqus-appearance-customizations.

https://www.labnol.org/internet/load-disqus-comments-on-click/28653/

【讨论】：