Javascript night mode - Click function that changes background color-CodePudding

I'm coding a website and I want to be able to switch between day mode and nigth mode. It's not working, I need help here. Thank you in advance.

HTML

<div>
<input type="checkbox"  id="chk" />
<label  for="chk">
    <i ></i>
    <i ></i>
    <div ></div>
</label>

Script

$(document).ready(function(){
  $("#chk").click(function(){
    $("body").css("background-color", "black");
  });
});

CodePudding user response：

In your method, when the <input> element's click event fires, the <body> element's background color is constantly assigned black; this behavior does not create a toggle effect.

Method-1

You can switch between day and night modes using the change event of the <input> element:

$(document).ready(function(){
  function changeColor(newBgColor) {
    $("#sun").css({color: newBgColor});
    $("#moon").css({color: newBgColor});
  }

  /* When the <input> element's change event fires */
  $('#chk').change(function() {
    if(this.checked) {
      $("body").css("background-color", "black");
      changeColor("white");
    }
    else {
      $("body").css("background-color", "white");
      changeColor("black");
    }
  });  
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="checkbox"  id="chk" />
  
  <label >
      <i id="moon" ></i>
      <i id="sun" ></i>
      <div ></div>
  </label>
</div>

Method-2

You can get around this by giving the <i> elements an id.

$(document).ready(function(){
  function changeColor(newBgColor) {
    $("#sun").css({color: newBgColor});
    $("#moon").css({color: newBgColor});
  }
  
  /* Fires when clicking <i> with id value of "sun" */
  $("#sun").click(function(){
    $("body").css("background-color", "black");
    changeColor("white");
  });
  
  /* Fires when clicking <i> with id value of "moon" */
  $("#moon").click(function(){
    $("body").css("background-color", "white");
    changeColor("black");
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label >
      <i id="moon" ></i>
      <i id="sun" ></i>
      <div ></div>
  </label>
</div>

CodePudding user response：

I would recommend you to use CSS variables to implement dark and light toggle. Very easy to implement. Check this awesome blog to learn. I have personally referred to this blog to implement the same feature on my project.

CodePudding user response：

You can use a css rule to make the background black (.black) and use toggleClass() to make it work

$(document).ready(function(){
  $("#chk").click(function(){
    $("body").toggleClass('black');
  });
});

.black { background-color:#000 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox"  id="chk" />
<label  for="chk">
    <i ></i>
    <i ></i>
    <div ></div>
</label>

CodePudding user response：

Check if your checkbox is checked and apply the styles.

$(document).ready(function(){
      $("#chk").click(function(){
           if (document.getElementById('chk').checked) {
                $("body").css("background-color", "black");
                $(".fa-moon").show()
                $(".fa-sun").hide()
                $(".fa-moon").css("color", "white");
                
            } else {
                $("body").css("background-color", "white");
                $(".fa-moon").hide()
                $(".fa-sun").show()
            }
      });
    });

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
    <input type="checkbox"  id="chk" />
    <label  for="chk">
        <i ></i>
        <i ></i>
        <div ></div>
    </label>
</html>