Javascript 我的背景图像没有'；使用Chrome Lite模式切换黑暗模式时不显示

我在我的网站上有这个问题，但只有通过手机访问和第一次访问时才有。加载页面后，我切换暗模式，我的图像不会显示。但是，当我刷新页面时，图像会正常显示。
这是我网站的链接：
我这边的问题（Android/Chrome）：
另外，这个问题与Chrome Lite模式有关。因为，当我停用Lite模式时，网站工作得非常好

我将暗模式切换如下：

const html = document.querySelector('html');
const checkbox = document.querySelector('.switch');


let check;

(() => {

  check = localStorage.getItem('check');

  if(check) {
    html.classList.toggle('dark-mode');
  }

})();

checkbox.addEventListener('change', function(){

  check = html.classList.toggle('dark-mode');

  if(check == true) {
    localStorage.setItem('check', check);
  } else {
    localStorage.clear();
  }

});

:root {
--portfolio: url('/assets/LightMode/portfolio.svg');
}
.dark-mode:root {
--portfolio: url('/assets/DarkMode/portfolio.svg');
}

图像通过CSS上的变量上传，如下所示：

const html = document.querySelector('html');
const checkbox = document.querySelector('.switch');


let check;

(() => {

  check = localStorage.getItem('check');

  if(check) {
    html.classList.toggle('dark-mode');
  }

})();

checkbox.addEventListener('change', function(){

  check = html.classList.toggle('dark-mode');

  if(check == true) {
    localStorage.setItem('check', check);
  } else {
    localStorage.clear();
  }

});

:root {
--portfolio: url('/assets/LightMode/portfolio.svg');
}
.dark-mode:root {
--portfolio: url('/assets/DarkMode/portfolio.svg');
}

---

我没有找到这个问题的具体解决方案，但我成功地解决了预加载映像的问题：

---

谢谢大家的帮助和理解

我爱你的网站！我看不出我这边有什么问题。我尝试使用chrome开发工具在我的桌面上以响应模式访问你的网站，并在我的android手机上访问。我在我的电脑和手机上都看到了你用红色/蓝色UX的照片，没有问题。你能提供你这边的截图吗？Tyvm！：D在我这边，看起来是这样的：如果我的网站是在黑暗模式下加载的，当我切换到光明模式时就会出现问题，反之亦然。有趣的是，我在chrome、移动模式下尝试过，但效果很好。当我在我真正的移动设备上试过之后，它发生了。这是一个很长的问题，但你们都使用IOS设备吗？即使你没有在IOS设备上使用Safari（也许你已经下载了Chrome作为应用程序），我相信手机处理代码的方式仍然不同于浏览器上的Chrome。这可能是IOS/Safari的问题？@ssbrear我在IPad IOS 14上没有遇到问题-在Safari和Chrome上都可以。您还可以在HTML中预加载图像：