带有 HTML UI KIT 模板的 Django 网站的 Javascript CSS DarkMode 脚本答案

【问题标题】：Javascript CSS DarkMode Script for Django Website with HTML UI KIT Template带有 HTML UI KIT 模板的 Django 网站的 Javascript CSS DarkMode 脚本
【发布时间】：2020-03-07 01:05:33
【问题描述】：

我现在非常沮丧，我不再了解这个世界...... 我在 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 }

[...]

Django 通用基础 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>

子网站索引模板

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

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

【问题讨论】：

我可以建议您使用浏览器的开发人员工具来检查您正在应用的样式是否被您网站上定义的其他样式覆盖。在 chrome 中，在 Elements 选项卡中找到该元素并单击它，然后查看开发人员工具的右侧并找到“样式”选项卡。被覆盖的样式用一条线划掉，如果你正在应用的样式碰巧被覆盖了，请为你在 CSS 中添加的样式添加一个 !important 标志。
从上面继续，我注意到你所说的代码的一部分正在工作，背景确实有 !important 标志。您的样式很可能被覆盖了。
由于 Javascript 部分应该将 CSS 类从 heading-seaction 更改为 heading-section-dark，因此没有覆盖。您可以在我添加的图像中看到，在第一个站点上，类更改正确，但在右侧的第二个站点上却没有。我在我的 NextCloud 链接中添加了一个图片“Chrome 开发工具”，以便您自己查看。即使我无论如何尝试添加！important 也不起作用，所以谢谢你的提示，但不是这样：/
这听起来像是一个愚蠢的问题，但您是否清除了缓存？很有可能您正在运行 JS 的过时缓存版本
是的，我做到了。我重新启动了 Python Django Webserver 我重新启动了 2 个不同的浏览器，完全包含 ikoknito 模式，所以遗憾的是，这不可能是缓存问题......

标签： javascript html css django caching

【解决方案1】：

我设法让它工作。我稍微改变了 Javascript 方法。现在，我不再为要更改的每个 HTML 标记分配一个 ID 以用于暗模式，而是遍历所有给定的可用 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')
    }
  }

【讨论】：