Я хочу убрать световой режим и создать кнопку переключения для ночного режима

Question

Я хочу сделать одну кнопку переключения для ночного режима вместо двух, которые у меня есть сейчас.

$(document).ready(function() {
  $('#nightMode').click(function() {
    $('body').removeClass('LightMode');
    $('body').addClass('nightMode');
  });
  
  $('#LightMode').click(function() {
    $('body').removeClass('nightMode');
    $('body').addClass('LightMode');
  });
});

body {
  padding: 50px;
}

footer {
  text-align: center;
  background-color: green;
  padding: 20px 0;
}

.nightMode {
  background-color: black;
  color: white;
}

.LightMode {
  background-color: white;
  color: black;
}

.nightbtn {
  padding: 10px;
  background-color: black;
  color: white;
}

.lightbtn {
  padding: 10px;
  background-color: yellow;
}

.firstParagraph {
  width: 50%;
  padding: 20px;
  border: 1px solid gold;
}

.secondParagraph {
  width: 50%;
  padding: 20px;
  border: 1px solid gold;
}

.doubleSection {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="LightMode" class="lightbtn"> Light Mode</button>
<button id="nightMode" class="nightbtn">Dark Mode</button>

<h1>Dark Mode is better than Day Light Mode</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="doubleSection">
  <p class="firstParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure soluta nihil recusandae distinctio, molestias eius provident dicta? Culpa aliquid velit pariatur repellat dolorem. Dolorem iure, magni expedita quis ex.</p>
  <p class="secondParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure soluta nihil recusandae distinctio, molestias eius provident dicta? Culpa aliquid velit pariatur repellat dolorem. Dolorem iure, magni expedita quis ex.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
  @Free to use
</footer>

https://codepen.io/naveen-jayawardana/pen/oNXoNBZ

Answer 1

Я хочу создать одну кнопку для переключения дня и ночи.

. В этом случае по умолчанию установите светлые классы на body. Затем назначьте один обработчик экземпляру кнопки, который вызывает toggleClass(), чтобы установить класс 'night' для body, например:

jQuery($ => {
  $('#toggle').on('click', function() {
    $('body').toggleClass('nightMode');
  });
});

body {
  padding: 50px;
  background-color: white;
  color: black;
}

footer {
  text-align: center;
  background-color: green;
  padding: 20px 0;
}

.nightMode {
  background-color: black;
  color: white;
}

.firstParagraph {
  width: 50%;
  padding: 20px;
  border: 1px solid gold;
}

.secondParagraph {
  width: 50%;
  padding: 20px;
  border: 1px solid gold;
}

.doubleSection {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle Mode</button>

<h1>Dark Mode is better than Day Light Mode</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="doubleSection">
  <p class="firstParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure soluta nihil recusandae distinctio, molestias eius provident dicta? Culpa aliquid velit pariatur repellat dolorem. Dolorem iure, magni expedita quis ex.</p>

  <p class="secondParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure soluta nihil recusandae distinctio, molestias eius provident dicta? Culpa aliquid velit pariatur repellat dolorem. Dolorem iure, magni expedita quis ex.</p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<footer>
  @Free to use
</footer>