文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用HTML工具包模板的Django网站的Javascript CSS DarkMode脚本

问使用HTML工具包模板的Django网站的Javascript CSS DarkMode脚本
EN

Stack Overflow用户
提问于 2019-11-11 18:38:04
回答 1查看 1.3K关注 0票数 0

我现在非常沮丧我不再了解这个世界了.我在超文本标记语言中有一个按钮，它触发一个Javascript代码，它应该添加CSS标记".dark“到给定的超文本标记语言标记。但奇怪的是，它只适用于所有网站的后台。更奇怪的是，开始页面上的h2 text标记变为白色，而子站点上的h1 text标记在我打开暗模式时没有变为白色。然后在侧边栏中，文本在深色模式下变为白色，但对侧边栏有利，相同的标题文本不会变为白色……即使我在那之后重新打开两个不同的浏览器，然后在一个新的匿名窗口中重新打开网站，这怎么可能呢？

按钮

代码语言：javascript
复制
<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

代码语言：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

代码语言：javascript
复制
[...]

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

代码语言：javascript
复制
<!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>

子网站索引模板

代码语言：javascript
复制
{% 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模板

代码语言：javascript
复制
{% 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

​

​

javascript
html
css
django
caching
EN

回答 1

Stack Overflow用户

发布于 2019-11-12 17:35:03

我设法让它工作了。我稍微改变了Javascript的方法。我现在不会为每个我想要更改的HTML标签分配ID以进入暗模式，而是遍历所有给定的可用HTML标签。像这样

代码语言：javascript
复制
  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')
    }
  }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/58799750

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档