Tombol toggle

Membuat Tombol toggle dark mode dengan HTML.

by ryanjhr350

HTML

<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Rekomendasi Artikel</title>
</head><body id="body-post-it">









<h3>Aktifkan dark mode dibawah</h3>


<ul>
<label class="switch">
<input id='gelap' type='checkbox' onclick='gtbg()' value='on'/>
<span class="slider round"></span>
</label></ul>


Entah apa yang merasukimu kak, sampe segitunya bikin video tiktok demi viral disosial media. Pada tanggal 8 maret kemarin akun sosial media saya khususnya facebook banyak sekali membahas mengenai topik kak nurul ini, namun aku kebingungan kenapa banyak orang yang membicarakanya bahkan ada yang membuatnya menjadi konten meme comic.
<br/>
<br/>



Karena penasaran akhirnya saya melakukan pencarian di beberapa situs berita, dan ternyata memang benar adanya kak nurul adalah seorang pengguna aktif tiktok yang tengah viral saat ini berkat videonya yang menampilkan hal tak wajar. Banyak orang berlomba-lomba memanfaatkan hal ini untuk mencari keuntungan atau sensasi semata.
<br/>

<br/>



Youtuber bahkan blogger berlomba-lomba membuat artikel yang membahas tentang kak nurul hidayah ini, bahkan situs media berita sekalipun sempat membuat artikel tentang topik ini. Gak tanggung-tanggung, tribun membuat dua buah artikel untuk mendapatkan banyak viewer.
<br/>
<br/>



<b>Trending di google dan facebook</b><br/>
Kata kunci pencarian google "nurul hidayah" sempat trending beberapa hari belakangan ini di google, facebook juga trending kok akan tetapi beda, facebook banyak dibanjiri dengan konten meme comic dan shitposting yang membahas kak nurul. Banyak orang yang memanfaatkan kesempatan ini ada yang saling berbagi ada pula yang memanfaatkan momen ini hanya untuk mencari sensasi.
<br/>
<br/>



Sebelumnya tiktok juga pernah digegerkan dengan beredarnya video anak kost yang menampilkan latar belakang tidak wajar. Namun pada akhirnya keempat remaja tersebut diamankan oleh petugas, mereka berada di sebuah...

CSS

.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 15px;
  border:1px solid #547991;
  border-radius:34px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:transparent;
  -webkit-transition: .3s;
  transition: .3s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 1px;
  bottom: .9px;
  background-color: #D41B1C;
  -webkit-transition: .3s;
  transition: .3s;
}
input:checked + .slider {
  background-color: #008CB7;
}
input:focus + .slider {
  box-shadow: 0 0 1px #008CB7;
}
input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

JavaScript

//<![CDATA[
function gtbg(){
if (localStorage.getItem('darkmode') == 'off'   || localStorage.getItem('darkmode') == null ){
localStorage.setItem('darkmode', 'on'); 
document.getElementById("gelap").checked = true; 
document.getElementById("body-post-it").style="background-color:#547991;color:#fff;";
}  
else { 
localStorage.setItem('darkmode', 'off'); 
document.getElementById("gelap").checked = false; 
document.getElementById("body-post-it").style="background-color:#fff;";
}


}
if (localStorage.getItem('darkmode') == 'on' ){ 
document.getElementById("gelap").checked = true; 
document.getElementById("body-post-it").style="background-color:#547991;color:#fff";
}
//]]>