добавить темный режим при нажатии

Question

Я пытаюсь поставить темный режим с jquery, но он не работает, мне нужна помощь. я хочу поставить темный режим на клик для идентификатора #btntheme, но он не работает, я хочу иметь возможность переключиться на красочную тему при клике у кого-нибудь есть идентификатор, как это сделать?

<div class="container">
  <div class="row" style="background:">
    <div class="two columns absolute" style="background: ">
      <a href="home.php"> <img src="../content/logo_tw.png" width="50" height="50" alt="logo"></a><br>
      <a href="home.php"> <img src="../content/home.png" width="20" height="20" alt="home"><strong>Home</strong></a><br>
      <a href="recherche.php"> <img src="../content/loupe.jpg" width="20" height="20"
          alt="recherche"><strong>Search</strong></a><br>
      <a href="messages.php"> <img src="../content/message.png" width="20" height="20"
          alt="messages"><strong>Messages</strong></a><br>
      <a href="profile.php"> <img src="../content/profile.png" width="20" height="20"
          alt="profile"><strong>Profile</strong></a><br>
    </div>
    <div class="ten columns separator border" style="background: ">
      <div class="pseudo">
        <a href="profile.php">
          <h3>Risitas</h3>
      </div>
      </a>
      <hr>
      <div id="fond"></div>
      <div id="avatar">
        <img src="../content/risitasb.jpg">
        <a href="modif_profil.php">  <button id="btnfollow" class="button-primary">Edit profile</button></a>
      </div>
      <form action="profile.php" method="post">
        <button id="btntheme" type="submit" class="button-primary">Theme</button>
        <button id="btncommentaire" class="button-primary">Comments</button>
        <button id="btnretweet" class="button-primary">Retweet</button>
      </form>

  </div>
</div>


</div>
</body>

Answer 1

Я сделал вам кодовую ручку: https://codepen.io/billgil/pen/WNvoGjB

Я добавил JavaScript, необходимый для HTML, чтобы вам было проще. При нажатии на кнопку «темный режим» класс добавляется в тег body. Затем используйте предоставленный пример CSS для изменения стиля чего-либо внутри этого класса.

Наслаждайтесь!

<!-- MY NEW BUTTON TO TOGGLE DARK MODE -->
<button id='jsDarkToggle' onclick={document.body.classList.toggle('dark-mode')}>Dark Mode</button>

<!-- YOUR HTML IN YOUR EXAMPLE -->
<div class="container">
  <div class="row" style="background:">
    <div class="two columns absolute" style="background: ">
      <a href="home.php"> <img src="../content/logo_tw.png" width="50" height="50" alt="logo"></a><br>
      <a href="home.php"> <img src="../content/home.png" width="20" height="20" alt="home"><strong>Home</strong></a><br>
      <a href="recherche.php"> <img src="../content/loupe.jpg" width="20" height="20"
          alt="recherche"><strong>Search</strong></a><br>
      <a href="messages.php"> <img src="../content/message.png" width="20" height="20"
          alt="messages"><strong>Messages</strong></a><br>
      <a href="profile.php"> <img src="../content/profile.png" width="20" height="20"
          alt="profile"><strong>Profile</strong></a><br>
    </div>
    <div class="ten columns separator border" style="background: ">
      <div class="pseudo">
        <a href="profile.php">
          <h3>Risitas</h3>
      </div>
      </a>
      <hr>
      <div id="fond"></div>
      <div id="avatar">
        <img src="../content/risitasb.jpg">
        <a href="modif_profil.php">  <button id="btnfollow" class="button-primary">Edit profile</button></a>
      </div>
      <form action="profile.php" method="post">
        <button id="btntheme" type="submit" class="button-primary">Theme</button>
        <button id="btncommentaire" class="button-primary">Comments</button>
        <button id="btnretweet" class="button-primary">Retweet</button>
      </form>

  </div>
</div>

.dark-mode {
  background: black;
  color: white;
}

.dark-mode a {
  color: white;
}