当我使用 Chrome Lite 模式切换暗模式时，我的背景图像不显示

如何解决当我使用 Chrome Lite 模式切换暗模式时，我的背景图像不显示

我的网站上有这个问题，但只有在通过移动设备访问并首次访问时才会出现。页面加载后，我切换了暗模式并且我的图像不显示。但是，当我刷新页面时，图像显示正常。
这是我网站的链接：https://hannahneves.github.io
我这边的问题（Android/Chrome）：https://youtu.be/3zESMLQuOWc
Aparantely，该问题与 Chrome 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();
  }

});

图像是使用 CSS 上的变量上传的，如下所示：

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

.portfolio-animation{
  background: var(--portfolio);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 267.5px;
  height: 182px;
  margin: 0 auto;
}

解决方法

我没有找到针对此问题的具体解决方案，但我设法解决了我在执行预加载图像时遇到的问题：Preloading CSS Images
感谢大家的帮助和理解！