let dmTimeoutId = null;
  const btnEl = document.getElementById('dm_btn');
  const icon = btnEl.querySelector('svg');
  const iconUseEL = btnEl.querySelector('use');
  const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

  const toggleBtnState = (force, init=false) => {
    clearTimeout(dmTimeoutId);
    if (!init) {
      icon.classList.add('dm-spin');
      dmTimeoutId = setTimeout(() => icon.classList.remove('dm-spin'), 500);
    }
    iconUseEL.setAttribute('xlink:href', force ? '#moon_icon' : '#sun_icon');
  };
  const getPreferredTheme = () => {
    const mode = localStorage.getItem("darkmode");

    if (mode) {
      return mode === "true";
    } else {
      return darkModeMediaQuery.matches;
    }
  };
  const applyMode = (isDarkMode, fromListener = false)=>{
     document.body.classList.toggle('dark-mode', isDarkMode);
     toggleBtnState(isDarkMode, fromListener);
     localStorage.setItem('darkmode', isDarkMode)
  };

  applyMode(getPreferredTheme(), true);

  btnEl.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    applyMode(document.body.classList.contains('dark-mode'));
  });