How to "call" a JavaScript file that changes theme color from light to dark

Question

I have a dark theme code that works perfectly on localhost. As soon as I replicate it online in WordPress; the theme-switch toggles from dark to light but no changes take effect.

test.html

<div class="my-class">
    <input type="checkbox" class="toggle-it" id="toggle-theme">
</div>

functions.php

function my_theme_enqueue_styles() {
  $parent_style = 'parent-style';
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version'));
  wp_enqueue_style('dark-theme-style', get_stylesheet_directory_uri() . '/dark-theme.css',
    array( $parent_style ),
    wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

function enqueue_theme_switcher_script() {
  wp_enqueue_script('my-switcher', get_stylesheet_directory_uri() . '/js/jswitcher.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_theme_switcher_script');

dark-theme.css

body.dark-theme {
    background-color: #1d1d1d !important;
}
/* more css etc... */

jswitcher.js

document.addEventListener("DOMContentLoaded", function () {
    const themeToggle = document.getElementById("toggle-theme");
    const body = document.body;

    themeToggle.addEventListener("change", function () {
        body.classList.toggle("dark-theme");
        updateThemeCookie();
    });
/* more scripts etc... */

I have checked all paths, ID etc. I searched here but nothing about actually calling the function within the main menu top bar as oppose to calling it via an HTML/PHP document. The HTML in test.html is pasted within a custom HTML 'widget' within Max Mega Menu In WordPress.