how to set checkbox status on index page and toggle content in an iframe

i'm trying to build a toggle between dark & light mode; but i'm having trouble getting my iframes to follow the switch...

Here's my current jquery:

$(document).ready(function() {
  var switched = $('#mode');
  
  switched.on("change", function(){
    if (switched.is(':checked')){
      $('html').removeClass('dark');
      $('html').addClass('light');
      localStorage.setItem('mode','light');
    }
    else{
      $('html').removeClass('light');
      $('html').addClass('dark');
      localStorage.setItem('mode','dark');
    }
  });
  var mode = localStorage.getItem('mode');
  if (mode == 'dark') {
    switched.prop( "checked", false );
    $('html').removeClass("light");
    $('html').addClass("dark");
  }
  if (mode == 'light') {
    switched.prop( "checked", true );
    $('html').removeClass("dark");
    $('html').addClass("light");
  }

});

My code fetches the state of a checkbox with the #mode id, and gives/removes the corresponding class to :root. The switch then works with CSS like this:

:root,
:root.dark {
  --color-bg: #263238;
  --color-fg: #ffffff;
}
:root.light {
  --color-bg: #ffffff;
  --color-fg: #000000;
}

But on my index page, i have a chatbox embedded in an html <object>, so I also wrote this bit of code, which i can apply to the chatbox page that's in the iframe:

$.get('https://amy-testfo.forumactif.com/', function(datas){ 
    var coche = $('#mode',datas);
    var mode = localStorage.getItem('mode');

    if(coche.not(':checked')){
      $('html').removeClass("light");
      $('html').addClass("dark");
    }
    if(coche.is(':checked')){
      $('html').removeClass("dark");
      $('html').addClass("light");
    }

    if (mode == 'dark') {
      $('html').removeClass("light");
      $('html').addClass("dark");
    }
    if (mode == 'light') {
      $('html').removeClass("dark");
      $('html').addClass("light");
    }

  });

But when I check the checkbox, the chatbox stays in dark mode and needs a page reload in order to actually switch, so that's my problem. I tried using .on('change') in the second script but it didn't do much

Thank you in advance if you decide to help!

If you control both the IFRAME and the main page, you can create a function within the IFRAME page and call it from the parent.

For example, in your IFRAME have a function called: toggleTheme. In my example, since you have two themes, its easier to just remove both of those classes and add a class compared to if statements.

function toggleTheme(theme){
   $("html").removeClass("dark light").addClass(theme);
}

Then give your iframe an ID if it doesn't already.

ie <iframe ..... id="chatBox"></div>

Then in the parent you can call that function like this:

const chatBox = document.querySelector("#chatBox");
chatBox.contentWindow.toggleTheme(theme);

document.querySelector("#chatBox") Will reference the iframe itself.

contentWindow will get the window object of the iframe.

toggleTheme is the function that you created from above