我有这个代码的波纹管，我用它来改变形式的光模式到黑暗模式。代码的工作，但有一些问题，当我使用黑暗模式，然后切换或改变到其他页面或当我加载页面有一些 Flink 。有任何建议，这个问题吗？。我真的很感激它：

// Light and dark mode function
const themeTogler = document.querySelector('.theme-togler');
const sunSpan = themeTogler.querySelector('.active');
const moonSpan = themeTogler.querySelector('span:not(.active)');

// Fungsi untuk mengubah tema
function toggleTheme() {
  sunSpan.classList.toggle('active');
  moonSpan.classList.toggle('active');

  // Cek apakah tema saat ini adalah tema terang atau gelap
  const isLightTheme = sunSpan.classList.contains('active');

  // Mengubah nilai warna sesuai dengan tema yang aktif
  if (isLightTheme) {
    document.documentElement.style.setProperty('--color-white', 'hsla(0, 0%, 100%, 1)');
    document.documentElement.style.setProperty('--color-white-variant', 'hsla(216, 44%, 95%, 1)');
    document.documentElement.style.setProperty('--color-info-light', 'hsl(216, 44%, 88%)');
    document.documentElement.style.setProperty('--color-dark', 'hsla(216, 22%, 30%, 1)');
    document.documentElement.style.setProperty('--color-dark-variant', 'hsla(216, 22%, 45%, 1)');
    document.documentElement.style.setProperty('--color-info-dark', 'hsla(216, 22%, 65%, 1)');
    document.documentElement.style.setProperty('--color-primary-link', 'hsla(217, 60%, 50%, 1)');
    document.documentElement.style.setProperty('--swiper-theme-color', 'hsla(211, 100%, 50%, 1)');

    // Simpan tema terang ke local storage
    localStorage.setItem('theme', 'light');
  } else {
    document.documentElement.style.setProperty('--color-white', 'hsla(216, 22%, 30%, 1)');
    document.documentElement.style.setProperty('--color-white-variant', 'hsla(216, 22%, 45%, 1)');
    document.documentElement.style.setProperty('--color-info-light', 'hsla(216, 22%, 65%, 1)');
    document.documentElement.style.setProperty('--color-dark', 'hsla(0, 0%, 100%, 1)');
    document.documentElement.style.setProperty('--color-dark-variant', 'hsla(216, 44%, 95%, 1)');
    document.documentElement.style.setProperty('--color-info-dark', 'hsl(216, 44%, 88%)');
    document.documentElement.style.setProperty('--color-primary-link', 'hsla(217, 60%, 80%, 1)');
    document.documentElement.style.setProperty('--swiper-theme-color', 'hsla(216, 44%, 95%, 1)');

    // Simpan tema gelap ke local storage
    localStorage.setItem('theme', 'dark');
  }
}

// Tambahkan event listener untuk menjalankan fungsi toggleTheme saat elemen moonSpan diklik
moonSpan.addEventListener('click', toggleTheme);
sunSpan.addEventListener('click', toggleTheme);

// Cek apakah tema sudah disimpan di local storage
const theme = localStorage.getItem('theme');

// Jika tema sudah disimpan, ubah tema sesuai dengan tema yang disimpan di local storage
if (theme === 'dark') {
  moonSpan.click();
}

/* -------------- ROOT VARIABLES -------------- */
:root {
  /* ROOT COLOR */
  --color-primary: hsla(217, 60%, 50%, 1);
  --color-primary-hover: hsl(217, 60%, 80%);
  --color-red: hsla(348, 85%, 45%, 1);
  --color-red-hover: hsla(348, 85%, 75%, 1);
  --color-green: hsla(157, 85%, 40%, 1);
  --color-green-hover: hsla(157, 85%, 75%, 1);
  --color-warning: hsla(45, 85%, 55%, 1);
  --color-warning-hover: hsla(45, 85%, 88%, 1);
  --color-purple: hsla(255, 55%, 75%);

  /* Warna Light dan Dark Mode */
  --color-primary-link: hsla(217, 60%, 50%, 1);
  --color-white: hsla(0, 0%, 100%, 1);
  --color-white-variant: hsla(216, 44%, 95%, 1);
  --color-info-light: hsl(216, 44%, 88%);
  --color-dark: hsla(216, 22%, 30%, 1);
  --color-dark-variant: hsla(216, 22%, 45%, 1);
  --color-info-dark: hsla(216, 22%, 65%, 1);
  /* Warna Swiper Btn */
  --swiper-theme-color: hsl(211, 100%, 50%);
  
  /* ROOT Border Radius */
  --card-border-radius: 2rem;
  --modal-border-radius:1rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 0.8rem;
  --circle-border-radius: 50%;

  --card-padding: 1.8rem;

  --transition: all 300ms ease;

  --box-shadow: 0 2rem 3rem var(--color-info-light);
}

当它处于黑暗模式，然后我加载或当我跳到其他页面，它不应该 Flink ，并停留在黑暗模式。