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

【问题标题】：How to change background color of an iframe while toggling light/dark mode?如何在切换亮/暗模式时更改 iframe 的背景颜色？
【发布时间】：2021-04-02 07:34:36
【问题描述】：

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

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

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

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

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

<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>

它将 cmets 部分变为深色，但问题仍然存在，它不会切换。 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>

【问题讨论】：

你在哪里调用你的函数？
你好，我不知道足够的技术术语。但是对于您的问题，当在源代码中的 body 标记上调用时，它会在整个 page body 上执行

标签： javascript html jquery css iframe

【解决方案1】：

嗯，你可以使用 CSS filter: invert() 属性。

退房：

CSS invert,
CSS invert summary &
MDN 上的CSS filter。

这个 sn-p 应该说明我的意思。

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>

这个问题类似于：

When I click the dark mode button, I want to apply the dark mode to the iframe tag as well

【讨论】：

这是个好主意，但我已经尝试过了。它没有用。我认为改变这一点的唯一方法是操纵Group description