Source Code Dark Mode Button Sederhana Blogger

Source Code Dark Mode Button Sederhana Blogger

Perkenalan

Halo Semuanya, Di Postingan kali ini saya akan memberikan Source Code Dark Mode Button Sederhana di Blogger, Seperti biasa kalian bebas Menggunakan Untuk Pribadi, Kode ini Bisa Kalian kembangkan Sesuai Template Kalian

Untuk Demo BIsa Cek dibawah

Demo

Langsung aja Salin Code dibawah

Source Code

<button id="dark-mode-button" onclick="toggleDarkMode()">Toggle Dark Mode</button>

<style>
  #dark-mode-button {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  
  #dark-mode-button:hover {
    background-color: #444;
  }
  
  #dark-mode-button:active {
    background-color: #555;
  }
  
  .dark-mode {
    background-color: #333;
    color: #fff;
  }
  
  .light-mode {
    background-color: #fff;
    color: #333;
  }
  
  /* Add this to make the entire page dark or light */
  body.dark-mode {
    background-color: #333;
  }
  
  body.light-mode {
    background-color: #fff;
  }
</style>

<script>
  let darkMode = false;
  
  function toggleDarkMode() {
    darkMode = !darkMode;
    document.body.classList.toggle("dark-mode", darkMode);
    document.body.classList.toggle("light-mode", !darkMode);
    document.getElementById("dark-mode-button").classList.toggle("dark-mode", darkMode);
    document.getElementById("dark-mode-button").classList.toggle("light-mode", !darkMode);
  }
</script>

Kesimpulan

Diatas adalah Source Code Dark Mode Button Sederhana Blogger., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :P