/* eslint-disable no-use-before-define */
async function enableDarkMode() {
  const navbar = document.querySelector('.navbar-nav');
  const userSelection = checkStorage();
  const darkModeButton = createIcon(userSelection);
  navbar.insertBefore(darkModeButton, navbar.querySelector('.nav-divider'));
  if (userSelection) {
    await loadStylesheet();
  }
}

function checkStorage() {
  const darkModeOption = localStorage.getItem('topDarkMode');
  if (darkModeOption === null) {
    localStorage.setItem('topDarkMode', JSON.stringify(false));
    return false;
  }
  return JSON.parse(darkModeOption);
}

async function toggleOption() {
  const isDarkModeEnabled = checkStorage();
  if (isDarkModeEnabled) {
    document.querySelector('#darkModeStyles').remove();
  } else {
    const result = await fetch('https://cdn.jsdelivr.net/gh/TheOdinProject/top-dark-theme@master/darkMode.css');
    const css = await result.text();
    const style = document.createElement('style');
    style.innerText = css;
    style.id = 'darkModeStyles';
    document.querySelector('head').appendChild(style);
  }
  localStorage.setItem('topDarkMode', JSON.stringify(!isDarkModeEnabled));
  swapIcons(!isDarkModeEnabled);
}

function createIcon(darkModeEnabled) {
  let darkModeButton;
  if (darkModeEnabled) {
    // Sun icon
    darkModeButton = document.createRange().createContextualFragment(
      `<li class="nav-item nav-link" id="dark-mode-item" style="flex-direction: row; justify-content: center; padding-right:0">
        <button data-test-id="dark-mode-button">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
        </button>
      </li>`,
    );
  } else {
    // Moon icon
    darkModeButton = document.createRange().createContextualFragment(
      `<li class="nav-item nav-link" id="dark-mode-item" style="flex-direction: row; justify-content: center;padding-right:0">
        <button data-test-id="dark-mode-button">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
      </li>`,
    );
  }
  darkModeButton.querySelector('button').addEventListener('click', toggleOption);
  return darkModeButton;
}

function swapIcons(isDarkModeEnabled) {
  const currentButton = document.querySelector('#dark-mode-item');
  const newButton = createIcon(isDarkModeEnabled);
  const navbar = document.querySelector('.navbar-nav');
  navbar.removeChild(currentButton);
  navbar.insertBefore(newButton, navbar.querySelector('.nav-divider'));
}

async function loadStylesheet() {
  const result = await fetch('https://cdn.jsdelivr.net/gh/TheOdinProject/top-dark-theme@master/darkMode.css');
  const css = await result.text();
  const style = document.createElement('style');
  style.innerText = css;
  style.id = 'darkModeStyles';
  document.querySelector('head').appendChild(style);
}

document.addEventListener('DOMContentLoaded', () => enableDarkMode());

@@ -81,279 +81,251 @@
 nst 
-navbar = document.querySelector('.navbar-nav');%0A  const userSelection = checkStorage();%0A  const darkModeButton = createIcon(userSelection);%0A  navbar.insertBefore(darkModeButton, navbar.querySelector('.nav-divider'));%0A  if (userSelection) %7B%0A    await loadStylesheet();%0A  %7D
+userSelection = checkStorage();%0A  toggleIcons(userSelection);%0A  if (userSelection) %7B%0A    await loadStylesheet();%0A  %7D%0A  document.querySelectorAll(%0A    '.dark-mode-button',%0A  ).forEach((button) =%3E button.addEventListener('click', toggleOption));
 %0A%7D%0A%0A
@@ -1138,20 +1138,22 @@
 ed));%0A  
-swap
+toggle
 Icons(!i
@@ -1187,20 +1187,23 @@
 ion 
-createIcon(d
+toggleIcons(isD
 arkM
@@ -1220,37 +1220,17 @@
 ) %7B%0A
-  let darkModeButton;%0A
   if (
-d
+isD
 arkM
@@ -1251,1745 +1251,298 @@
     
-// Sun icon%0A    darkModeButton = document.createRange().createContextualFragment(%0A      %60%3Cli class=%22nav-item nav-link%22 id=%22dark-mode-item%22 style=%22flex-direction: row; justify-content: center; padding-right:0%22%3E%0A        %3Cbutton data-test-id=%22dark-mode-button%22%3E%0A          %3Csvg xmlns=%22http://www.w3.org/2000/svg%22 class=%22h-6 w-6%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke=%22currentColor%22%3E%0A            %3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222%22 d=%22M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z%22 /%3E%0A          %3C/svg%3E%0A        %3C/button%3E%0A      %3C/li%3E%60,%0A    );%0A  %7D else %7B%0A    // Moon icon%0A    darkModeButton = document.createRange().createContextualFragment(%0A      %60%3Cli class=%22nav-item nav-link%22 id=%22dark-mode-item%22 style=%22flex-direction: row; justify-content: center;padding-right:0%22%3E%0A        %3Cbutton data-test-id=%22dark-mode-button%22%3E%0A          %3Csvg xmlns=%22http://www.w3.org/2000/svg%22 class=%22h-6 w-6%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke=%22currentColor%22%3E%0A            %3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222%22 d=%22M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z%22 /%3E%0A          %3C/svg%3E%0A        %3C/button%3E%0A      %3C/li%3E%60,%0A    );%0A  %7D%0A  darkModeButton.querySelector('button').addEventListener('click', toggleOption);%0A  return darkModeButton;%0A%7D%0A%0Afunction swapIcons(isDarkModeEnabled) %7B%0A  const currentButton = document.querySelector('#dark-mode-item');%0A  const newButton = createIcon(isDarkModeEnabled);%0A  const navbar = document.querySelector('.navbar-nav');%0A  navbar.removeChild(currentButton);%0A  navbar.insertBefore(newButton, navbar.querySelector('.nav-divider'));
+document.querySelector('#dark-mode-sun').style.display = 'block';%0A    document.querySelector('#dark-mode-moon').style.display = 'none';%0A  %7D else %7B%0A    document.querySelector('#dark-mode-sun').style.display = 'none';%0A    document.querySelector('#dark-mode-moon').style.display = 'block';%0A  %7D
 %0A%7D%0A%0A

Fix event listeners