Javascript CSS DarkMode Script для сайта Django с шаблоном HTML UI KIT

Question

Я абсолютно разочарован сейчас, я больше не понимаю мир ... У меня есть кнопка в HTML, которая запускает код Javascript, который должен добавить тег CSS ".dark" к данным тегам HTML. Но любопытно, что это работает только для фона на всех сайтах. И еще более любопытно, что текстовый тег h2 на стартовой странице меняется на белый, но текстовый тег h1 на дочернем сайте не меняется на белый, когда я включаю темный режим. И затем снова на боковой панели текст становится белым для темного режима, но справа от боковой панели тот же текст заголовка не становится белым ... даже если после этого я снова открою 2 разных браузера, а затем снова открою веб-сайт в новом окне инкогнитоКак это вообще возможно?

Кнопка

<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 }

[...]

Джанго Базовая база 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

{% 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 %}

Шаблон SIP-Benutzer Subsite

{% 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>

Все изображения: https://cloud.vanthiel.it/index.php/s/C5m7W2r6NwNjEXp

Answer 1

Мне удалось заставить его работать. Я немного изменил подход Javascript. Вместо присвоения идентификатора каждому тегу HTML, который я хочу изменить в темном режиме, теперь я перебираю все доступные доступные теги HTML. Как это

  function DarkMode() {
    localStorage.setItem('mode', (localStorage.getItem('mode') || 'light') === '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('#ftco-navbar').classList.replace('ftco-navbar-light', 'ftco-navbar-dark') : document.querySelector('#ftco-navbar').classList.replace('ftco-navbar-dark', 'ftco-navbar-light')

    var buttons = document.querySelectorAll('.btn');
    var heading = document.querySelectorAll('h1, h2, h3 ,h4');
    for (var i = 0, len = buttons.length; i < len; i++) {
      console.log(buttons[i]);
      localStorage.getItem('mode') === 'dark' ? buttons[i].classList.replace('btn-white', 'btn-dark') : buttons[i].classList.replace('btn-dark', 'btn-white')
    }
    for (var i = 0, len = heading.length; i < len; i++) {
      console.log(heading[i]);
      localStorage.getItem('mode') === 'dark' ? heading[i].classList.replace('heading-section', 'heading-section-dark') : heading[i].classList.replace('heading-section-dark', 'heading-section')
    }
  }