Mode

 

Dark Mode

HTML

<img id="day" class="day" src="sun.gif">

<img id="night" class="night" src="night.gif">

CSS

<style>

body{

text-align: center;

margin: 18%;

}

.day{

display: none;

margin-left: 45%;

width: 100px;

cursor: pointer;

border-radius: 50%;

border: 4px solid black;

}

.night{

cursor: pointer;

border-radius: 50%;

border: 4px solid black;

width: 100px;

}

</style>

JS

<script>

let day = document.getElementById('day');

let night = document.getElementById('night');

day.addEventListener('click',function(){

document.body.style.backgroundColor = "white";

document.getElementById('day').style.display = "none";

document.getElementById('night').style.display = "block";

document.getElementById('day').style.marginLeft = "45%";

})

night.addEventListener('click',function(){

document.body.style.backgroundColor = "#2A2F33";

document.getElementById('night').style.display = "none";

document.getElementById('day').style.display = "block";

document.getElementById('night').style.marginLeft = "45%";

})

</script>