我想在切换亮/暗模式的同时更改嵌入注释部分的background-color[这是一个iframe]。当夜间模式打开时，一切都会变暗，除了iframe，它看起来真的很难看。
我知道iframe的背景颜色不能通过这样做来改变-
iframe {
background-color: #fff;
color:#000
}
body.dark iframe {
background-color: #000;
color:#fff
}
或者通过更改css部分中的任何内容，这是一个可悲的事实。
但有一种方法可以改变"博主"提供的评论部分的背景色。
<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>
好吧，您可以使用CSSfilter: 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标签以及