[FIXED] How to make Dark and Light theme with django?

Issue

everyone I have a conflict with Django static files with javascript and jQuery. I'm making a website with two themes Dark and Light with my basic HTML, JS, and CSS it's working very well, but when I moved it to the Django template with static files I got an error although the full style and JS functions working very well.

Uncaught TypeError: Cannot read properties of null (reading 'querySelector')

That's my HTML

                <div class="color-modes position-relative ps-5">
                    <a class="bd-theme btn btn-link nav-link dropdown-toggle d-inline-flex align-items-center justify-content-center text-primary p-0 position-relative rounded-circle"
                        href="#" aria-expanded="true" data-bs-toggle="dropdown" data-bs-display="static"
                        aria-label="Toggle theme (light)">
                        <svg class="bi my-1 theme-icon-active">
                            <use href="#sun-fill"></use>
                        </svg>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end fs-14px" data-bs-popper="static">
                        <li>
                            <button type="button" class="dropdown-item d-flex align-items-center active"
                                data-bs-theme-value="light" aria-pressed="true">
                                <svg class="bi me-4 opacity-50 theme-icon">
                                    <use href="#sun-fill"></use>
                                </svg>
                                Light
                                <svg class="bi ms-auto d-none">
                                    <use href="#check2"></use>
                                </svg>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item d-flex align-items-center"
                                data-bs-theme-value="dark" aria-pressed="false">
                                <svg class="bi me-4 opacity-50 theme-icon">
                                    <use href="#moon-stars-fill"></use>
                                </svg>
                                Dark
                                <svg class="bi ms-auto d-none">
                                    <use href="#check2"></use>
                                </svg>
                            </button>
                        </li>
                    </ul>
                </div>

and that's my JQuery and JS code:

}(jQuery), APP = APP || {}, function (e) {
  'use strict';

  APP.colorModes = {
    init: function () {
      this.colorModes();
    },
    colorModes: function () {
      if (!document.documentElement.hasAttribute("data-bs-theme")) return;

      const e = localStorage.getItem("theme"),
            t = () => e ? e : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
            n = function (e) {
        e === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches ? document.documentElement.setAttribute("data-bs-theme", "dark") : (e === "auto" && (e = "light"), document.documentElement.setAttribute("data-bs-theme", e));
      };

      n(t());

      const s = (t, n = !1) => {
        const e = document.querySelector(".color-modes");
        if (!e) return;
        document.querySelectorAll("[data-bs-theme-value]").forEach(e => {
          e.classList.remove("active"), e.setAttribute("aria-pressed", "false");
        }), document.querySelectorAll(".color-modes").forEach(n => {
          const s = n.querySelector(".theme-icon-active use"),
                e = n.querySelector('[data-bs-theme-value="' + t + '"]'),
                o = e.querySelector("svg use").getAttribute("href");
          e.classList.add("active"), e.setAttribute("aria-pressed", "true"), s.setAttribute("href", o);
        }), n && e.focus();
      };

      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
        (e !== "light" || e !== "dark") && n(t());
      });

      const o = function () {
        s(t()), document.querySelectorAll("[data-bs-theme-value]").forEach(e => {
          e.addEventListener("click", () => {
            const t = e.getAttribute("data-bs-theme-value");
            localStorage.setItem("theme", t), n(t), s(t, !0);
          });
        });
      };

      o();
    }
  }, e(document).ready(function () {
    APP.colorModes.init();
  });

and that's my sample of the CSS:

[data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
}

[data-bs-theme=dark] {
    --bs-body-color: #ababab;
    --bs-body-color-rgb: 171, 171, 171;
    --bs-body-bg: #1F261D;
}

[data-bs-theme=dark] .navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

Solution

I made another script function with javascript and deleted the old one

<script>
    
    function myFunction() {
      var element = document.body;
      var themeValue = event.target.getAttribute('data-bs-theme-value');
      
          // Remove the "active" class from all buttons
            document.querySelectorAll('.dropdown-item').forEach(function (btn) {
            btn.classList.remove('active');
            btn.setAttribute('aria-pressed', 'false');
        });

        // Add the "active" class to the clicked button
        event.target.classList.add('active');
        event.target.setAttribute('aria-pressed', 'true');

        // Conditionally toggle the value of the data-bs-theme attribute
        element.dataset.bsTheme = (themeValue === 'dark') ? 'dark' : 'light';

    }

  </script>

Answered By - Emad Younan