Ads

Cara Menambahkan Fungsi Dark Mode ke dalam Blog

Cara Menambahkan Fungsi Dark Mode ke dalam Blog
Dagruel

Pertama Tambahkan script berikut di atas tag </body>.

<script type="text/javascript">
  //<![CDATA[
  const defaultTheme = 'dark-theme';
  const darkMode=()=>{const e=document.getElementById("darkButton");e&&e.addEventListener("click",()=>{e.checked?(document.body.classList.add("dark-theme"),e.checked=!0,localStorage.setItem("theme-mode","dark-theme")):(document.body.classList.remove("dark-theme"),e.checked=!1,localStorage.setItem("theme-mode","light-theme"))}),null==localStorage.getItem("theme-mode")?"dark-theme"==defaultTheme?(document.body.classList.add("dark-theme"),e&&(e.checked=!0)):document.body.classList.remove("dark-theme"):"dark-theme"==localStorage.getItem("theme-mode")?(document.body.classList.add("dark-theme"),e&&(e.checked=!0)):document.body.classList.remove("dark-theme")};
  document.addEventListener('DOMContentLoaded', darkMode);
  //]]>
</script>

yang ditandai adalah thema dafult bisa kalian ganti.

  • dark-theme = Dark Mode
  • light-theme = Light Mode

Kedua Pasang Tombol nya terserah mau pasang di mana. (Tampilan nya sama seperti template saya).

<div class="darkButton">
  <input class="check" id="darkButton" type="checkbox"></input>
  <label class="icon" for="darkButton" title="Mode Warna"></label>
  <div class="terang">
    <svg viewBox="0 0 24 24">
      <path d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z"></path>
    </svg> <span>Light Mode</span>
  </div>
  <div class="gelap">
    <svg viewBox="0 0 24 24">
      <path d="M12,2C9.76,2 7.78,3.05 6.5,4.68L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z"></path>
    </svg> <span>Dark Mode</span>
  </div>
</div>

Dan ini css tombol nya pasang di atas ]]></b:skin>.

.darkButton{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;flex-direction:row-reverse;align-items:center;justify-content:flex-end;margin:13px 0;position:relative}.darkButton>.check,.darkButton>.check:checked~.terang,.darkButton>.gelap{display:none}.darkButton>.icon{background-color:#E70000;position:absolute;right:3px;outline:0;width:40px;height:10px;padding:0;cursor:pointer;border-radius:100px;transition:all .3s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;z-index:1}.darkButton>.check:checked+.icon{background-color:#537EC5}.darkButton>.icon:after,.darkButton>.icon:before{content:'';background-color:transparent;display:block}.darkButton>.icon:before{position:relative;width:50%;height:100%}.darkButton>.icon:after{position:absolute;width:24px;height:24px;top:-7.5px;left:0;box-shadow:rgb(0 0 0 / 50%) 0 1px 3px;border-radius:100px;transition:all .15s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z' fill='%23E70000'/%3E%3C/svg%3E") center/17px no-repeat #fff}.darkButton>.check:checked+.icon:after{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z' fill='%23dddddd'/%3E%3C/svg%3E") center/17px no-repeat #1d2129;left:40%;box-shadow:rgb(255 255 255 / 50%) 0 1px 3px}.darkButton>.check:checked~.gelap,.darkButton>.terang{display:inline-block}.darkButton svg{width:24px;height:24px;vertical-align:middle;margin-right:10px;transition:.3s}.darkButton svg path{fill:#333}.dark-theme .darkButton svg path{fill:#ddd}.darkButton span{color:#333;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dark-theme .darkButton span{color:#ddd}

Sampai Sini sudah selesai sekarang cara penggunaan nya. Perhatikan css berikut:

/* Light Mode */
body {
  background-color: #f1f1f1;
  color: #333
}
.classItem {
  background-color: #fff
}

/* Dark Mode */
body.dark-theme {
  background-color: #3f3f3f;
  color: #ddd
}
.dark-theme .classItem {
  background-color: #000;
}

Pada css di atas terdapat perbedaan antara light dan dark mode yang memiliki text .dark-theme.

Intinya jika ingin menambahkan fungsi dark Mode di web maka tambahkan text .dark-theme di setiap css yang terdapat background atau color nya.

1 komentar

Blogger Disqus
  1. min boleh request? kalok boleh

    link : https://kalam.sindonews.com/surah/1/al-fatihah

    disebelah Kembali ke Daftar Surat di bangian atas post

    + pakek chapter list berdasarkan label

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!