Css 在discus中切换暗/亮模式

我有一个发布文章的网站。它由Jekyll组成，由GitHub部署。该站点有一个按钮，可以在不刷新页面的情况下将亮模式切换到暗模式，反之亦然

今天，我已经为它安装了DISKS代码。它有暗模式和亮模式。所以我刚刚在我的切换函数中添加了这个：

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

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

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

这确实改变了背景，但我无法改变文本的颜色。如果我尝试

filter:invert（100%）

一切都很好，但是图像看起来也是反转的。使用

#取消线程*：not（img）

也不起作用

如果我打开firefox的inspector工具，我会看到属性有

！重要信息

。所以我不能再改变风格了。即使在基本的CSS中，来回切换实际上也不起作用

---

有没有办法在不使用过滤器的情况下翻转颜色？

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

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

然后，该按钮将使用以下功能重新加载Discus注释部分：

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

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

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

最后，由于disqs评论部分是自动的，它会检查继承的颜色，并决定我阅读的是浅模式还是暗模式

因为，通过切换按钮，网站会将身体的颜色变暗，Discus会自动继承这一点，只需点击切换按钮即可重新加载到黑暗模式

我不知道这是否会导致延迟，因为我在本地主机上进行了实验，到目前为止，它对我来说并不延迟

参考资料：

---

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

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

然后，该按钮将使用以下功能重新加载Discus注释部分：

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

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

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

最后，由于disqs评论部分是自动的，它会检查继承的颜色，并决定我阅读的是浅模式还是暗模式

因为，通过切换按钮，网站会将身体的颜色变暗，Discus会自动继承这一点，只需点击切换按钮即可重新加载到黑暗模式

我不知道这是否会导致延迟，因为我在本地主机上进行了实验，到目前为止，它对我来说并不延迟

参考资料：