Javascript CSS DarkMode Script for Django Website with HTML UI KIT Template

I'm absolutely frustrated right now I don't understand the world anymore... I have a Button in HTML that triggers a Javascript code that should add the CSS Tag ".dark" to given HTML tags. But it's curiously only working for the background on all sites. And even more curiously the h2 text tag on the start page changes to white but the h1 text tag on a subsite doe not change to white as I switch on dark mode. And then in the sidebar again the text IS turning white for dark mode but right beneth the sidebar the same heading text doesn't turn white... even if I reopen 2 different browsers after that and then reopen the website in a new incognito window, how is this even possible?

Button

<li class="nav-item">
  <a class="nav-link icon d-flex align-items-center" href="#"
    onclick="DarkMode()"><i
      class="ion-ios-contrast mr-2"></i></a>
</li>

Javascript

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('h1').classList.add('dark') : document.querySelector('h1').classList.remove('dark')
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('h2').classList.add('dark') : document.querySelector('h2').classList.remove('dark')
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('a').classList.add('dark') : document.querySelector('a').classList.remove('dark')
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('table').classList.add('dark') : document.querySelector('table').classList.remove('dark')
  })

  function DarkMode() {
    localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark');
    localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
    localStorage.getItem('mode') === 'dark' ? document.querySelector('h1').classList.add('dark') : document.querySelector('h1').classList.remove('dark')
    localStorage.getItem('mode') === 'dark' ? document.querySelector('h2').classList.add('dark') : document.querySelector('h2').classList.remove('dark')
    localStorage.getItem('mode') === 'dark' ? document.querySelector('a').classList.add('dark') : document.querySelector('a').classList.remove('dark')
    localStorage.getItem('mode') === 'dark' ? document.querySelector('table').classList.add('dark') : document.querySelector('table').classList.remove('dark')
  }
</script>

CSS

[...]

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff; }

html.dark {
    background-color: #17191a !important;
}
html.dark, body.dark, input.dark, textarea.dark, select.dark, button.dark {
    background-color: #17191a;
}
html.dark, body.dark, input.dark, textarea.dark, select.dark, button.dark {
    border-color: #535353;
    color: #dcdbd8;
}
a.dark {
    color: #308af2;
}
table.dark {
    border-color: #484848;
}

::placeholder.dark {
    color: #b1aca2;
}
::selection.dark {
    background-color: #0057c2;
    color: #f2f2f2;
}
::-moz-selection.dark {
    background-color: #0057c2;
    color: #f2f2f2;
}
input:-webkit-autofill.dark,
textarea:-webkit-autofill.dark,
select:-webkit-autofill.dark {
    background-color: #505600 !important;
    color: #dcdbd8 !important;
}
::-webkit-scrollbar.dark {
    background-color: #1b1c1d;
    color: #bbb7b0;
}
::-webkit-scrollbar-thumb.dark {
    background-color: #282a2c;
}
::-webkit-scrollbar-thumb:hover.dark {
    background-color: #2f3234;
}
::-webkit-scrollbar-thumb:active.dark {
    background-color: #3a3d40;
}
::-webkit-scrollbar-corner.dark {
    background-color: #17191a;
}
*.dark {
    scrollbar-color: #282a2c #1b1c1d;
}

[...]

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  line-height: 1.4;
  color: #3c4858;
  font-weight: 300; }

h1.dark, h2.dark, h3.dark, h4.dark, h5.dark,
.h1.dark, .h2.dark, .h3.dark, .h4.dark, .h5.dark {
  color: #ffffff }

[...]

Django Generic Base HTML

<!DOCTYPE html>
<html lang="de">
<head>
  {% block title %}<title>telba.de Onboarding</title>{% endblock %}
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet">
  {% load static %}
  <link href="{% static 'favicon.ico' %}" rel="shortcut icon" type="image/png"/>
  <link href="{% static 'css/styles.css' %}" rel="stylesheet">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Prata&display=swap" rel="stylesheet">
  <link href="{% static 'ui/css/open-iconic-bootstrap.min.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/animate.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/owl.carousel.min.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/owl.theme.default.min.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/magnific-popup.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/aos.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/ionicons.min.orig.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/nouislider.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/flaticon.css' %}" rel="stylesheet">
  <link href="{% static 'ui/css/icomoon.css' %}" rel="stylesheet">
  <!-- Our Custom CSS -->
  <link href="{% static 'ui/css/style.css' %}" rel="stylesheet">
  <!-- Bootstrap CSS CDN -->
  <!--    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"-->
  <!--          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" rel="stylesheet">-->
  <!-- Font Awesome JS -->
  <script crossorigin="anonymous" defer
          integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
          src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
  <script crossorigin="anonymous" defer
          integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
          src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>
</head>
<body>
{% block sidebar %}
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
  <div class="container">
    <a class="navbar-brand" href="{% url 'indexui' %}">
      {% load static %}
      <img src="{% static 'images/corplogo.svg' %}">
    </a>
    <a class="navbar-brand" href="{% url 'indexui' %}"></a>
    <button aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
            data-target="#ftco-nav" data-toggle="collapse" type="button">
      <span class="oi oi-menu"></span> Menu
    </button>
    <div class="collapse navbar-collapse" id="ftco-nav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'indexui' %}"><i
            class="ion-ios-home mr-2"></i> Startseite</a></li>
        {% if user.is_superuser %}
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'admin:index' %}"><i
            class="ion-ios-person mr-2"></i> Admin-Panel</a></li>
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'context' %}"><i
            class="ion-ios-cube mr-2"></i> Kontexte</a></li>
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'sipuser' %}"><i
            class="ion-ios-people mr-2"></i>Benutzer</a></li>
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'exten_int' %}"><i
            class="ion-ios-apps mr-2"></i> Funktionen</a></li>
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'exten_ext' %}"><i
            class="ion-ios-map mr-2"></i> Routen</a></li>
        {% else %}
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'sipuser' %}"><i
            class="ion-ios-people mr-2"></i> Benutzer</a></li>
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'exten_int' %}"><i
            class="ion-ios-apps mr-2"></i> Funktionen</a></li>
        <li class="nav-item"><a class="nav-link icon d-flex align-items-center" href="{% url 'exten_ext' %}"><i
            class="ion-ios-map mr-2"></i> Routen</a></li>
        {% endif %}
        <li class="dropdown nav-item">
          <a class="dropdown-toggle nav-link icon d-flex align-items-center" data-toggle="dropdown" href="#">
            <i class="ion-ios-more mr-2"></i>
            Konto
            <b class="caret"></b>
          </a>
          <div class="dropdown-menu dropdown-menu-left">
            {% if user.is_authenticated %}
            <a class="dropdown-item" href="{% url 'logout'%}?next={{request.path}}">
              <i class="ion-ios-log-out mr-2"></i> {{ user.get_username }} Abmelden
            </a>
            {% else %}
            <a class="dropdown-item" href="{% url 'login'%}?next={{request.path}}">
              <i class="ion-ios-log-out mr-2"></i> Anmelden
            </a>
            {% endif %}
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link icon d-flex align-items-center" href="#"
             onclick="DarkMode()"><i
              class="ion-ios-contrast mr-2"></i></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

{% endblock %}
<div>
  {% block content %}
  {% endblock %}
  {% block pagination %}
  {% if is_paginated %}
  <div class="pagination pagination-2">
    {% if page_obj.has_previous %}
    <a class="pageitem" href="{{ request.path }}?page={{ page_obj.previous_page_number }}">Zurück</a>
    {% endif %}
    <a class="active" href="#">{{ page_obj.number }}</a>
    {% if page_obj.has_next %}
    <a class="pageitem" href="{{ request.path }}?page={{ page_obj.next_page_number }}">Weiter</a>
    {% endif %}
  </div>
  {% endif %}
  {% endblock %}
</div>

<script src="/static/ui/js/jquery.min.js"></script>
<script src="/static/ui/js/jquery-migrate-3.0.1.min.js"></script>
<script src="/static/ui/js/popper.min.js"></script>
<script src="/static/ui/js/bootstrap.min.js"></script>
<script src="/static/ui/js/jquery.easing.1.3.js"></script>
<script src="/static/ui/js/jquery.waypoints.min.js"></script>
<script src="/static/ui/js/jquery.stellar.min.js"></script>
<script src="/static/ui/js/owl.carousel.min.js"></script>
<script src="/static/ui/js/jquery.magnific-popup.min.js"></script>
<script src="/static/ui/js/aos.js"></script>
<script src="/static/ui/js/nouislider.min.js"></script>
<script src="/static/ui/js/moment-with-locales.min.js"></script>
<script src="/static/ui/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/ui/js/main.js"></script>

<!-- jQuery CDN - Slim version (=without AJAX) -->
<script crossorigin="anonymous"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Popper.JS -->
<script crossorigin="anonymous"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script crossorigin="anonymous"
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function ()
    {
      $('#sidebarCollapse').on('click', function ()
        {
            $('#sidebar').toggleClass('active');
        }
      );
    }
  );

  document.addEventListener('DOMContentLoaded', (event) => {
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('h1').classList.add('dark') : document.querySelector('h1').classList.remove('dark')
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('h2').classList.add('dark') : document.querySelector('h2').classList.remove('dark')
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('a').classList.add('dark') : document.querySelector('a').classList.remove('dark')
    ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('table').classList.add('dark') : document.querySelector('table').classList.remove('dark')
  })

  function DarkMode() {
    localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark');
    localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
    localStorage.getItem('mode') === 'dark' ? document.querySelector('h1').classList.add('dark') : document.querySelector('h1').classList.remove('dark')
    localStorage.getItem('mode') === 'dark' ? document.querySelector('h2').classList.add('dark') : document.querySelector('h2').classList.remove('dark')
    localStorage.getItem('mode') === 'dark' ? document.querySelector('a').classList.add('dark') : document.querySelector('a').classList.remove('dark')
    localStorage.getItem('mode') === 'dark' ? document.querySelector('table').classList.add('dark') : document.querySelector('table').classList.remove('dark')
  }
</script>
</body>
</html>

Subsite Index Template

{% extends "base_generic.html" %}

{% load static %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">


{% block content %}
<h1>telba.de Onboarding</h1>
<p>Wilkommen zur Onboarding Website der <em>telba AG</em>.</p>
<hr/>
<h2>Statistic</h2>
<p>Insgesamt wurden bereits die Folgende Anzahl an SIP Nutzer und Contexte über dieses Website Onboarded:</p>
<ul>
  <li><strong>Kontexte:</strong> {{ num_context }}</li>
  <li><strong>SIP-Nutzer:</strong> {{ num_sipuser }}</li>
  <li><strong>Externe mappings:</strong> {{ num_exten_ext }}</li>
  <li><strong>Interne mappings:</strong> {{ num_exten_int }}</li>
</ul>


<div class="col-md-12">
  <h2 class="heading-section mb-4">Notifications</h2>
  <div class="alert alert-info">
    <div class="container">
      <div class="d-flex">
        <div class="alert-icon">
          <i class="ion-ios-information-circle-outline"></i>
        </div>
        <p class="mb-0 ml-2"><b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find
          them...</p>
      </div>
      <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <span aria-hidden="true"><i class="ion-ios-close"></i></span>
      </button>
    </div>
  </div>
  <div class="alert alert-success">
    <div class="container">
      <div class="d-flex">
        <div class="alert-icon">
          <i class="ion-ios-checkmark-circle"></i>
        </div>
        <p class="mb-0 ml-2"><b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd</p>
      </div>
      <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <span aria-hidden="true"><i class="ion-ios-close"></i></span>
      </button>
    </div>
  </div>
  <div class="alert alert-warning">
    <div class="container">
      <div class="d-flex">
        <div class="alert-icon">
          <i class="ion-ios-warning"></i>
        </div>
        <p class="mb-0 ml-2"><b>Warning Alert:</b> Hey, it looks like you still have the "copyright © 2015" in your
          footer. Please update it!</p>
      </div>
      <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <span aria-hidden="true"><i class="ion-ios-close"></i></span>
      </button>
    </div>
  </div>
  <div class="alert alert-danger">
    <div class="container">
      <div class="d-flex">
        <div class="alert-icon">
          <i class="ion-ios-information-circle-outline"></i>
        </div>
        <p class="mb-0 ml-2"><b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good
          excuse for your Boss...</p>
      </div>
      <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <span aria-hidden="true"><i class="ion-ios-close"></i></span>
      </button>
    </div>
  </div>
</div>


<p>Sie haben diese Seite {{ num_visits }}{% if num_visits == 1 %} Mal besucht{% else %} male besucht{% endif %}.</p>
{% endblock %}

Subsite SIP-Benutzer Template

{% extends "base_generic.html " %}

{% block content %}
<div class="main-section">
  <section class="ftco-section pb-md-3 bg-dark">
  </section>

  <div class="wrapper">
    <nav class="active" id="sidebar">
      <div class="sidebar-header">
        <h1 class="heading-section mb-4 pb-md-3">Funktionen</h1>
      </div>

      <h4 class="heading-section mb-4 pb-md-3">Was ist ein Funktion?</h4>
      <p>
        Ut aliquet tempus ac tellus aliquet quisque erat risus habitasse penatibus ut inceptos hac, ligula ipsum congue
        malesuada nostra. Consectetuer integer risus adipiscing at. Dignissim, potenti pellentesque ultricies commodo
        nisi diam luctus. Vivamus congue orci quis diam elementum justo proin. Class enim velit mollis facilisis,
        hymenaeos maecenas Libero torquent montes tempor turpis libero bibendum dictum facilisis cubilia montes eleifend
        lacinia diam venenatis et risus nunc urna scelerisque. Pellentesque taciti tincidunt Nunc mus sem dui.

        Sit molestie ut nullam rutrum libero lacus consequat mauris. A convallis mus pellentesque. Nibh euismod torquent
        habitant elementum sociosqu magnis bibendum aliquam placerat. Leo, neque sem aptent justo, sem malesuada
        blandit. Proin mauris, inceptos, curae;. Magna feugiat ultricies commodo phasellus orci lobortis mattis mattis
        facilisis suscipit mollis neque odio sem. Ante. Fringilla molestie cum laoreet congue risus eleifend vestibulum
        inceptos et.

        Blandit egestas class semper litora sollicitudin et mi platea et ornare consequat mus. Eu rutrum montes eget
        habitasse sapien, pharetra per a curae; neque sociosqu enim rutrum litora posuere ante. Iaculis curae; aptent
        nonummy semper odio. Sociis interdum tellus euismod, lorem blandit nisi bibendum a maecenas. Accumsan Fermentum
        duis turpis. Aenean, pretium malesuada quisque potenti sed vulputate a penatibus leo ridiculus massa facilisis.
        Laoreet parturient.
      </p>
    </nav>
    <button class="btn btn-outline-info" id="sidebarCollapse" type="button">
      <!--      <i class="ion-ios-more"></i> Was ist ein SIP-Benutzer?-->
      <i class="ion-ios-more"></i> Hilfe
    </button>

    <div class="container-table-functions">
      <section>
        <h1 class="text-center">Funktionen</h1>
        <br>
        <p class="text-center">
          <a class="btn btn-outline-primary px-4 py-3" href="{% url 'exten_int-create' %}">
            <i class="ion-ios-person-add mr-2"></i> Einen weitere Funktion Hinzufügen
          </a>
        </p>
        {% if exten_int_list %}
        <table class="table table-hover">
          <thead>
          <tr>
            <th scope="col">Kontext</th>
            <th scope="col">SIP-Benutzer</th>
            <th scope="col">Typ</th>
            <th scope="col">Attribute</th>
            <th scope="col">Aktionen</th>
          </tr>
          </thead>
          <tbody>
          {% for exten_int in exten_int_list %}
          <tr>
            <th scope="row">{{exten_int.CONTEXT}}</th>
            <th>{{exten_int.EXTEN_INT}}</th>
            <th>{{exten_int.EXTEN_TYPE}}</th>
            <th>{{exten_int.EXTEN_ATTRIBUTES}}</th>
            <th><a href="{{ exten_int.get_absolute_url }}">Anzeigen</a> -
              <a href="{% url 'exten_int-update' exten_int.pk %}">Aktualisieren</a> -
              <a href="{% url 'exten_int-delete' exten_int.pk %}">Löschen</a></th>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-center">Bisher existieren keine Funktionen. Bei Bedarf legen Sie bitte eine Funktion für einen
          SIP-Benutzer an.</p>
        {% endif %}
        {% endblock %}
      </section>
    </div>
  </div>
</div>

All Pictures: https://cloud.vanthiel.it/index.php/s/C5m7W2r6NwNjEXp