Hallo sahabat dumet ,bagaimana kabar ya sehat dan tetap semangat tentunya, dalam kesempatan kali ini saya akan membahas tentang bagaimana cara membuat switch mode menggunakan toggle dengan tampilan siang malam pada bagian content kita, baiklah ikuti langkah-langkah pembuatannya.Langkah Pertama :
Sahabat membuat HTML terlebih dahulu seperti dibawah ini;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Siang Malam Dengan Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="tuker"></div>
<div class="content">
<h1>Mengapa Ada Pergantian Siang Malam??</h1>
<p>Bumi yang berotasi menyebabkan terjadinya siang dan malam. Gerak Bumi sebenarnya bukan hanya rotasi saja, tetapi ada satu gerak lagi yang disebut revolusi (gerak mengelilingi Matahari)</p>
<br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero recusandae, accusantium ipsa fugiat sit magnam ullam. Aliquam tenetur, obcaecati veniam nobis, reiciendis ea delectus cupiditate deserunt voluptate nostrum quasi consequuntur.</p>
</div>
</body>
</html>
Langkah Kedua :
Nah skerang ketikan sintax CSS juga ya:
body{
margin:0;
padding:0;
font-family: sans-serif;
}
body.night{
background: #111111;
}
.tuker{
position: absolute;
top:40px;
right:50px;
background: #fff;
border:2px solid #111111;
width: 45px;
height:20px;
cursor: pointer;
border-radius:20px;
transition: 0.5s;
}
.tuker.active{
background: #111111;
border:2px solid #fff654;
}
.tuker:before{
content: '';
position: absolute;
top:2px;
left:2px;
width: 16px;
height: 16px;
background: #111111;
border-radius:50%;
transition: 0.5s;
}
.tuker.active:before{
left:27px;
background: #fff654;
}
.content{
margin:100px auto;
width: 1000px;
}
.content h1{
margin:0 0 20px;
padding: 0px;
color: #000;
transition: 0.5s;
}
.content p{
margin:0;
padding:0;
transition: 0.5s;
font-size: 17px;
}
.night .content h1,
.night .content p
{
color:#fff;
}
Nah jangan lupa sisipkan script diatas untuk javascript nya pada file html, jika sudah selesai jangan lupa save kemudian sahabat jalankan pada broser masing-masing, maka akan seperti berikut tampilannya.
  
Tampilan yang kiri adalah saat toggle belum di swicth atau digeser, dan gambar yang kanan setelah digeser maka akan berubah warna background dan warna teksnya. bagaimana sangat mudah bukan membuatnya.
Demikian pembahasan artikel ini jangan lupa dicoba lalu dikembangin lagi ya, semoga bermanfaat dan tetap semangat.
terima kasih.