Question

我尝试用jquery设置暗模式，但他不起作用，我需要一些帮助。我希望将黑暗模式放在ID #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

我为您制作了一个Codepen： 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;
}

点击添加暗模式

1 个答案: