我试图建立一个黑暗和光明模式之间的切换;但是我很难让我的iframe跟随开关。。
以下是我目前的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");
  }

});

字符串
我的代码获取带有#mode id的复选框的状态，并将相应的类赋予/移除到：root。然后switch就像这样使用CSS：

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

型
但是在my index page上，我有一个嵌入在html中的聊天框，所以我还写了这段代码，我可以将其应用于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");
    }

  });

型
但是当我选中复选框时，聊天框保持在黑暗模式，需要重新加载页面才能真正切换，所以这就是我的问题。我尝试在第二个脚本中使用.on('change')，但它没有做太多：（
提前感谢你，如果你决定帮助！