CODEWITHSUNDEEP
javascripthtmljquerycssiframe
vk datta
vk datta

Reputation: 23

How to change background color of an iframe while toggling light/dark mode?

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>

Upvotes: 1

Views: 4576

Answers (1)

Officer Erik 1K-88
Officer Erik 1K-88

Reputation: 199

Well, you could use the CSS filter: invert() property.

Check out:

This snippet should show what I mean.

const iframes = document.querySelectorAll('iframe');

function toggleTheme() {
  for (let 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();">Toggle 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

Upvotes: 3

Related Questions