My background-image doesn't show when I toggle dark mode with Chrome Lite Mode

Question

I have this issue on my website, but only when it's accessed by mobile and the first access on it. After the page is loaded, I toggle the dark mode and my images don't show up. However, when I refresh the page, the images shows normally.
That's the link for my website: https://hannahneves.github.io
The issue on my end (Android/Chrome): https://youtu.be/3zESMLQuOWc
Aparantely, the issue is related with Chrome Lite Mode. Because, when I deactivate Lite Mode the website works perfectly.

I made the dark mode toggle like this:

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();
  }

});

And the images is uploaded using variables on CSS, like this:

: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;
}

Answer 1

I didn't find a specific solution for this issue, but I managed to solve my problem doing the pre-load image: Preloading CSS Images
Thank you all for being helpful and understanding!