HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LogIn</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'LogIn/login.css' %}" />
    <link
      rel="stylesheet"
      href="{% static 'General/DarkMode/darkmode.css' %}"
    />
    <link
      rel="stylesheet"
      href="{% static 'General/Particles/particles.css' %}"
    />
    <link rel="stylesheet" href="{% static 'General/main.css' %}" />
  </head>
  <body>
    <!--Header Section LogIn-->
    <header>
      <a href="{% url 'start' %}"
        ><img src="{% static 'Assets/Logo.png' %}" class="Logo" alt="Logo"
      /></a>
      <button id="dark_mode_button" onclick="showMessage()">Change</button>
    </header>

    <!--LogIn Section (Main Section)-->
    <section class="main-login">
      <div class="login-form">
        <h1>Log In</h1>
        <label for="username">Username</label>
        <input type="text" id="username" />
        <label for="password">Password</label>
        <input type="password" id="password" />
        <button class="login-button" onclick="login()">Log In</button>
        <h4>
          Don't have an account?
          <a href="">Sign up</a>
        </h4>
        <h4><a href="">Forget Password?</a></h4>
      </div>
    </section>
    <script src="{% static 'LogIn/login.js' %}"></script>
    {% csrf_token %}
    <script>
      function login(){
        let formData = new FormData();
        let token = "{{ csrf_token }}";
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        console.log(username, password)
        formData.append("username", username)
        formData.append("password", password)
        formData.append("csrfmiddlewaretoken", token)

        fetch("", {
          method: "POST",
          body: formData,
        });
      }
    </script>

    <!--Background Stuff-->
    <div class="wrapper">
      <div class="content">
        <p>Are you sure you want to switch on the lightmode?</p>
        <div class="button">
          <button class="item" onclick="switchMode()">Turn on Anyway</button>
        </div>
      </div>
    </div>
    <div id="particles-js"></div>
    <script src="{% static 'General/Particles/particles.js' %}"></script>
    <script src="{% static 'General/Particles/app.js' %}"></script>
    <script src="{% static 'General/DarkMode/darkmode.js' %}" defer></script>
  </body>
</html>