Menambahkan Fitur Night Mode pada Website dengan Darkmode.Js

Menambahkan Fitur Night Mode pada Website dengan Darkmode.Js. Hampir semua website sekarang memiliki fitur darkmode. Fitur ini memang kadang sangat dibutuhkan, terutama karena fitur ini diyakini mampu mengurangi rasa sakit pada mata jika kita terlalu lama menatap monitor. Platform populer seperti YouTube maupun Twitter pun memiliki fitur night mode.

Menambahkan Night Mode dalam Beberapa Detik
Dengan darkmode.js, kalian bisa menambahkan fitur night mode hanya dalam beberapa detik karena semuanya sudah tersedia dan tinggal pasang.

Pertama, dan yang paling simple, kalian bisa menggunakan JSDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

Atau jika kalian tidak suka menggunakan resource eksternal, kalian bisa install dengan NPM.

npm install darkmode-js

Lalu tambahkan kode javascript berikut

import Darkmode from 'darkmode-js';
new Darkmode().showWidget();

Mengganti Style Default
Jika warna default saat dark mode aktif dirasa kurang pas, kita bisa mengaturnya dengan menambahkan CSS dengan class .darkmode--activated. Contoh

.darkmode--activated .main-inner .widget {background-color: #333;}

Atau jika ingin mengabaikan beberapa elemen agar tidak berubah saat dark mode diaktifkan, tambahkan isolation: isolate; ke dalam class css, atau bisa juga dengan menambahkan mix-blend-mode: difference; kedalam class .darkmode--activated. Contoh

.darkmode--activated #footer-wrapper, .darkmode--activated #footer-bottom {
  mix-blend-mode: difference;
}

Demo

• https://darkmodejs.learn.uno
• https://tradivegan.com (with custom label)
• https://what.toeat.in (with custom label)
• https://www.kanbanote.com (without the widget, once logged in)
• https://www.sandoche.com (with custom label)

Untuk mengenal lebih lanjut tentang Darkmode.js, bisa cek halaman GitHub mereka di link berikut:

Darkmode.js

Oke mungkin itu saja artikel kali ini, jika ada yang ingin ditanyakan silahkan tinggalkan komentar.