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

Question

I want to change the background-color of an embedded comments section [that's an iframe ] while toggling light/dark mode.我想在切换亮/暗模式时更改嵌入式评论部分的background-color [即iframe ]。 Everything turns dark when night mode is turned on except the iframe, that looks really ugly.打开夜间模式后，除了 iframe 之外，一切都变暗了，看起来真的很难看。

I know iframe's background-color can't be changed by doing this -我知道 iframe 的背景颜色不能通过这样做来改变 -

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

Or by changing anything in the css part and that's a sad fact.或者通过更改 css 部分中的任何内容，这是一个可悲的事实。

But there's a way for changing the background-color of comments section provided by 'blogger'.但是有一种方法可以更改“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>

It turns the comments section to a dark one but still the problem remains the same, it doesn't toggle.它将评论部分变成了一个黑暗的部分，但问题仍然存在，它不会切换。 The iframe remains dark in both light and in dark mode. iframe 在明暗模式下均保持暗态。 Is there any solution for that?有什么解决办法吗？

I use the following css method for toggle dark/light mode.我使用以下 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

Well, you could use the CSS filter: invert() property.好吧，您可以使用 CSS filter: invert()属性。

Check out:查看：

the CSS invert , CSS 反转，
CSS invert summary & CSS 反转摘要&
the CSS filter on MDN. MDN 上的CSS 过滤器。

This snippet should show what I mean.这个片段应该显示我的意思。

 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>

This question is similar to:这个问题类似于：

When I click the dark mode button, I want to apply the dark mode to the iframe tag as well 当我单击暗模式按钮时，我也想将暗模式应用于 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