如何在切换亮/暗模式时更改 iframe 的背景颜色？

Question

我想在切换亮/暗模式时更改嵌入式评论部分的background-color [即iframe ]。 打开夜间模式后，除了 iframe 之外，一切都变暗了，看起来真的很难看。

我知道 iframe 的背景颜色不能通过这样做来改变 -

iframe {
background-color: #fff;
color:#000 
}
body.dark iframe {
background-color: #000;
color:#fff 
}

或者通过更改 css 部分中的任何内容，这是一个可悲的事实。

但是有一种方法可以更改“blogger”提供的评论部分的背景颜色。

<Group description="body">
<Variable name="body.background" description="Background" color="$(body.background.color)" type="background" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
<Variable name="body.background.color" description="Body background color" type="color" default="#000" value="#000"/>
<Variable name="body.text.color" description="Color" type="color" default="#fff" value="#fff"/>
</Group>

它将评论部分变成了一个黑暗的部分，但问题仍然存在，它不会切换。 iframe 在明暗模式下均保持暗态。 有什么解决办法吗？

我使用以下 css 方法来切换暗/亮模式。

<style> 
body {
background-color: #fff;
color:#000 
}
body.dark {
background-color: #000;
color:#fff 
}
</style>

<script>
const body = document.querySelector('body');
function toggleDark() {
 if (body.classList.contains('dark')) {
 body.classList.remove('dark');
 localStorage.setItem("theme", "light");
 } else {
 body.classList.add('dark');
 localStorage.setItem("theme", "dark");
 }
} 
if (localStorage.getItem("theme") === "dark") {
 body.classList.add('dark');
}
</script>

Answer 1

好吧，您可以使用 CSS filter: invert()属性。

查看：

CSS 反转，
CSS 反转摘要&
MDN 上的CSS 过滤器。

这个片段应该显示我的意思。

 const iframes = document.querySelectorAll('iframe'); function toggleTheme() { for (i = 0; i < iframes.length; i++) { iframes[i].classList.toggle('is-dark'); } }

 .is-dark { filter: invert(80%); }

 <;doctype html> <html lang="en"> <body> <button onClick="toggleTheme():">Toogle Theme</button> <iframe id="the-iframe" src="https.//wikipedia.org/"></iframe> </body> </html>

这个问题类似于：

当我单击暗模式按钮时，我也想将暗模式应用于 iframe 标签

如何在切换亮/暗模式时更改 iframe 的背景颜色？

问题描述

1 个解决方案

解决方案1
2 2020-12-23 17:57:22

如何在切换亮/暗模式时更改 iframe 的背景颜色？

问题描述

1 个解决方案

解决方案1 2 2020-12-23 17:57:22

解决方案1
2 2020-12-23 17:57:22