how replace navbar-light to navbar-dark when with js

Question

(function () {
  let lightSwitch = document.getElementById("lightSwitch");
  if (!lightSwitch) {
    return;
  }
  
  /**
   * @function darkmode
   * @summary: changes the theme to 'dark mode' and save settings to local stroage.
   * Basically, replaces/toggles every CSS class that has '-light' class with '-dark'
   */
  function darkMode() {
    document.querySelectorAll(".light").forEach((element) => {
      element.className = element.className.replace(/light/g, "dark")
    });

    document.body.classList.remove("light");
    document.body.classList.add("dark");

    if (document.body.classList.contains("text-dark")) {
      document.body.classList.replace("text-dark", "text-light");
    } else {
      document.body.classList.add("text-light");
    }
    
    // set light switch input to true
    if (! lightSwitch.checked) {
      lightSwitch.checked = true;
    }
    localStorage.setItem("lightSwitch", "dark");
  }

  /**
   * @function lightmode
   * @summary: changes the theme to 'light mode' and save settings to local stroage.
   */
  function lightMode() {
    document.querySelectorAll(".dark").forEach((element) => {
      element.className = element.className.replace(/-dark/g,"light")
    });

    document.body.classList.remove("dark");
    document.body.classList.add("light");

    if (document.body.classList.contains("text-light")) {
      document.body.classList.replace("text-light", "text-dark");
    } else {
      document.body.classList.add("text-dark");
    }
    
    if (lightSwitch.checked) {
      lightSwitch.checked = false;
    }
    localStorage.setItem("lightSwitch", "light");
  }
  
  /**
   * @function onToggleMode
   * @summary: the event handler attached to the switch. calling @darkMode or @lightMode depending on the checked state.
   */
  function onToggleMode() {
    if (lightSwitch.checked) {
      darkMode();
    } else {
      lightMode();
    }
  }
  
  /**
   * @function getSystemDefaultTheme
   * @summary: get system default theme by media query
   */
  function getSystemDefaultTheme() {
    const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
    if (darkThemeMq.matches) {
      return "dark";
    }
    return "light";
  }

  function setup() {
    let settings = localStorage.getItem("lightSwitch");
    if (settings == null) {
      settings = getSystemDefaultTheme();
    }
    
    if (settings === "dark") {
      lightSwitch.checked = true;
    }
    
    lightSwitch.addEventListener("change", onToggleMode);
    onToggleMode();
  }
  
  setup();
  
})();

root {
    --blue: #2196f3;
    --green: #3ddb85;
    --orange: #f86734;
    --primary: 07304 c;
    --red: #ea4335;
    --yallow: #fbdb00;
    --bg-0: #000000;
    --bg-100: #424242;
    --bg-200: #616161;
    --bg-300: #757575;
    --bg-400: #9e9e9e;
    --bg-50: #212121;
    --bg-500: #bdbdbd;
    --bg-600: #e0e0e0;
    --bg-700: #eeeeee;
    --bg-800: #f5f5f5;
    --bg-900: #fafafa;
    --md-dark: #1e1e1e;
    --md-light: rgb(250, 250, 250);
    --bg-white: #ffffff;
}


a {
    background-color: transparent;
    color: #287ff0;
    text-decoration: none;
}

body {
    font-family: monospace, Cairo;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
}

#lightSwitch {
    transform: scale(1.5);
}

.hidden {
    height: 0;
    visibility: hidden;
    width: 0;
}

.fill {
    height: 100vw;
    max-height: 100vh;
    max-width: 100vw;
    width: 100vw;
}

.page-footer {
    background-color: #FFFFFF
    color: #000000;
    display: block;
    height: auto;
    padding-bottom: 20px;
    position: relative;
    width: 100vw;
}

.page-footer p {
    color: rgba(0, 0, 0);
}

.footer-menu {
    list-style: none;
    padding-left: 0;
    position: relative;
}

.footer-menu li {
    margin-bottom: 8px;
}

ul.footer-menu {
    padding: 8px;
}

.footer-menu a {
    color: #000000;
}

.footer-menu a:hover {
    color: #3ddb85;
}


/*Light Mode */

.light{background-color: #fafafa;}
.light .primary {color: #000000; !important;}
.light .secondary{color: #2d2d2d}
.light .cardX {-webkit-box-shadow:0 0 10px rgba(0,0,0,0.15);box-shadow:0 0 10px rgba(0,0,0,0.15);background-clip: border-box;border: 1px solid rgba(0, 0, 0, 0.125);border-radius: 0.75rem;}
.light #navbar{ background-color:#fafafa;color:#000000;box-shadow:0 0 6px rgb(0,0,0,15%);left:0;min-height:50px;padding:0;position:fixed;right:0;top:0;transition:transform .200s linear;width:100%;will-change:transform;z-index:10000;}

.navbar .navbar-nav a.nav-link{color: #000000}
:is(.navbar .navbar-nav a.nav-link):hover{color: #3ddb85}
:is(.navbar .navbar-nav a.nav-link):focus{color: #3ddb85}

/* Dark Mode */
.dark {background-color: #121212;}
.dark .primary {color: #FFFFFF; !important;}
.dark .secondary{color: #aaaaaa}
.dark #navbar{ background-color:#1c1c1c;color:#FFFFFF;box-shadow:0 0 6px rgb(0,0,0,15%);left:0;min-height:50px;padding:0;position:fixed;right:0;top:0;transition:transform .200s linear;width:100%;will-change:transform;z-index:10000;}
.dark .navbar  .navbar-nav a.nav-link{color: #ffffff}
:is( .dark.navbar .navbar-nav a.nav-link):hover{color: #3ddb85;}
:is( .dark.navbar.navbar-nav a.nav-link):focus{color:#3ddb85;}
.dark .cardX {-webkit-box-shadow:0 0 10px rgba(0,0,0,0.15);box-shadow:0 0 10px rgba(0,0,0,0.15);
    background-clip: border-box;border: 1px solid rgba(0, 0, 0, 0.125);border-radius: 0.75rem;
    background-color:#1c1c1c;
}

<body class="light">
<header>

    <nav  id="navbar" class="light navbar navbar-expand-sm navbar-light light">
        <div class="container">
            <!-- LIGHT SWITCH -->
            <div class="d-flex">
                <label class="form-check-label m-3" for="lightSwitch">
                    <svg class="bi bi-brightness-high"
                         fill="currentColor"
                         height="25"
                         viewBox="0 0 16 16"
                         width="25"
                         xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
                    </svg>
                </label>
                <input class="hidden" id="lightSwitch" type="checkbox"/>
            </div>
            <script src="assets/js/switch.js"></script>
            <a class="navbar-brand" href="./index.html"></a>
            <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
                    data-bs-target="#navbarCollapse" data-bs-toggle="collapse" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto py-3 py-lg-0">
                    <li class="nav-item">
                        <a class="nav-link " href="blog/index.html">مدونة</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="blog/index.html">مشاريع</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="blog/index.html">من انا</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="blog/index.html">دروس</a>
                    </li>
                </ul>
            </div>
        </div>

    </nav>
</header>

hi divs ;) The problem is when I check The checkbox and uncheck it, three times the navbar-brand take blue color and navbar-toggler-icon be invisible I think that JavaScript is maybe the that make this issue because is replaced light with dark and nav element have to light but i don't sure maybe nested bootstrap class

--edit-- problem solved by edit javaScript file

(function () {
  let lightSwitch = document.getElementById("lightSwitch");
  if (!lightSwitch) {
    return;
  }
  
  /**
   * @function darkmode
   * @summary: changes the theme to 'dark mode' and save settings to local stroage.
   * Basically, replaces/toggles every CSS class that has '-light' class with '-dark'
   */
  function darkMode() {
    document.querySelectorAll(".navbar-light").forEach((element) => {
      element.className = element.className.replace(/light/g, "dark")
    });

    document.querySelectorAll(".light").forEach((element) => {
      element.className = element.className.replace(/light/g, "dark")
    });

    document.body.classList.remove("light");
    document.body.classList.add("dark");

    if (document.body.classList.contains("text-dark")) {
      document.body.classList.replace("text-dark", "text-light");
    } else {
      document.body.classList.add("text-light");
    }
    
    // set light switch input to true
    if (! lightSwitch.checked) {
      lightSwitch.checked = true;
    }
    localStorage.setItem("lightSwitch", "dark");
  }

  /**
   * @function lightmode
   * @summary: changes the theme to 'light mode' and save settings to local stroage.
   */
  function lightMode() {
    document.querySelectorAll(".navbar-dark").forEach((element) => {
      element.className = element.className.replace(/dark/g, "light")
    });
    document.querySelectorAll(".dark").forEach((element) => {
      element.className = element.className.replace(/-dark/g,"light")
    });

    document.body.classList.remove("dark");
    document.body.classList.add("light");

    if (document.body.classList.contains("text-light")) {
      document.body.classList.replace("text-light", "text-dark");
    } else {
      document.body.classList.add("text-dark");
    }
    
    if (lightSwitch.checked) {
      lightSwitch.checked = false;
    }
    localStorage.setItem("lightSwitch", "light");
  }
  
  /**
   * @function onToggleMode
   * @summary: the event handler attached to the switch. calling @darkMode or @lightMode depending on the checked state.
   */
  function onToggleMode() {
    if (lightSwitch.checked) {
      darkMode();
    } else {
      lightMode();
    }
  }
  
  /**
   * @function getSystemDefaultTheme
   * @summary: get system default theme by media query
   */
  function getSystemDefaultTheme() {
    const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
    if (darkThemeMq.matches) {
      return "dark";
    }
    return "light";
  }

  function setup() {
    let settings = localStorage.getItem("lightSwitch");
    if (settings == null) {
      settings = getSystemDefaultTheme();
    }
    
    if (settings === "dark") {
      lightSwitch.checked = true;
    }
    
    lightSwitch.addEventListener("change", onToggleMode);
    onToggleMode();
  }
  
  setup();
  
})();

enter code here