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 invert,
CSS invert summary &
MDN 上的 CSS filter。

这个片段应该能说明我的意思。

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

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

1 个答案: