I want to change the background-color
of an embedded comments section [that's an iframe
] while toggling light/dark mode. Everything turns dark when night mode is turned on except the iframe, that looks really ugly.
I know iframe's background-color can't be changed by doing this -
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.
But there's a way for changing the background-color of comments section provided by '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. Is there any solution for that?
I use the following css method for toggle dark/light mode.
<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>
page body
when called onbody
tag in the source code